From 2357ae6eb978a8cf3ce84d2b2c74111efd55acba Mon Sep 17 00:00:00 2001 From: Christian Findlay <16697547+MelbourneDeveloper@users.noreply.github.com> Date: Sun, 14 Dec 2025 09:00:03 +1100 Subject: [PATCH 01/26] New stuff --- .vscode/extensions/dart-jsx/QUICKSTART.md | 46 + .vscode/extensions/dart-jsx/README.md | 34 + .vscode/extensions/dart-jsx/TESTING.md | 69 + .vscode/extensions/dart-jsx/TEST_PATTERNS.jsx | 211 +++ .../dart-jsx/language-configuration.json | 36 + .vscode/extensions/dart-jsx/package.json | 30 + .../syntaxes/dart-jsx.tmLanguage.json | 211 +++ .vscode/launch.json | 14 + .vscode/settings.json | 47 + .vscode/tasks.json | 42 + AGENTS.md | 4 +- CLAUDE.md | 4 +- analysis_options.yaml | 5 + cspell-dictionary.txt | 2 +- docs/npm_usage.md | 330 ++++ examples/jsx_demo/analysis_options.yaml | 3 + examples/jsx_demo/dart_test.yaml | 8 + examples/jsx_demo/lib/counter.g.dart | 25 + examples/jsx_demo/lib/counter.jsx | 30 + examples/jsx_demo/lib/tabs_example.g.dart | 45 + examples/jsx_demo/lib/tabs_example.jsx | 62 + examples/jsx_demo/pubspec.lock | 411 +++++ examples/jsx_demo/pubspec.yaml | 16 + examples/jsx_demo/test/counter_test.dart | 129 ++ examples/jsx_demo/test/jsx_demo_test.dart | 246 +++ examples/jsx_demo/test/tabs_example_test.dart | 127 ++ examples/jsx_demo/test/test_helpers.dart | 18 + examples/jsx_demo/test/test_template.html | 29 + examples/jsx_demo/web/app.dart | 31 + examples/jsx_demo/web/index.html | 29 + examples/too_many_cooks/lib/src/db/db.dart | 106 ++ examples/too_many_cooks/lib/src/server.dart | 6 + .../lib/src/tools/admin_tool.dart | 179 ++ .../package.json | 49 +- .../src/extension.ts | 130 +- .../src/state/store.ts | 70 + .../src/test-api.ts | 9 +- .../src/ui/decorations/lockDecorations.ts | 33 +- .../src/ui/tree/agentsTreeProvider.ts | 3 +- .../src/ui/tree/locksTreeProvider.ts | 1 + .../src/ui/tree/messagesTreeProvider.ts | 97 +- .../src/ui/tree/plansTreeProvider.ts | 21 +- packages/dart_jsx/bin/jsx.dart | 143 ++ packages/dart_jsx/lib/dart_jsx.dart | 27 + packages/dart_jsx/lib/src/parser.dart | 462 ++++++ packages/dart_jsx/lib/src/result_aliases.dart | 14 + packages/dart_jsx/lib/src/transformer.dart | 204 +++ packages/dart_jsx/lib/src/transpiler.dart | 366 +++++ packages/dart_jsx/pubspec.lock | 405 +++++ packages/dart_jsx/pubspec.yaml | 15 + .../syntaxes/dart-jsx.tmLanguage.json | 211 +++ packages/dart_jsx/test/integration_test.dart | 230 +++ packages/dart_jsx/test/transpiler_test.dart | 1453 +++++++++++++++++ .../lib/dart_node_react_native.dart | 2 + .../lib/src/navigation_types.dart | 115 ++ .../lib/src/npm_component.dart | 509 ++++++ packages/dart_node_react_native/pubspec.lock | 2 +- .../test/npm_component_test.dart | 168 ++ .../test/react_native_test.dart | 418 +++++ tools/build/build.dart | 48 +- 60 files changed, 7747 insertions(+), 43 deletions(-) create mode 100644 .vscode/extensions/dart-jsx/QUICKSTART.md create mode 100644 .vscode/extensions/dart-jsx/README.md create mode 100644 .vscode/extensions/dart-jsx/TESTING.md create mode 100644 .vscode/extensions/dart-jsx/TEST_PATTERNS.jsx create mode 100644 .vscode/extensions/dart-jsx/language-configuration.json create mode 100644 .vscode/extensions/dart-jsx/package.json create mode 100644 .vscode/extensions/dart-jsx/syntaxes/dart-jsx.tmLanguage.json create mode 100644 analysis_options.yaml create mode 100644 docs/npm_usage.md create mode 100644 examples/jsx_demo/analysis_options.yaml create mode 100644 examples/jsx_demo/dart_test.yaml create mode 100644 examples/jsx_demo/lib/counter.g.dart create mode 100644 examples/jsx_demo/lib/counter.jsx create mode 100644 examples/jsx_demo/lib/tabs_example.g.dart create mode 100644 examples/jsx_demo/lib/tabs_example.jsx create mode 100644 examples/jsx_demo/pubspec.lock create mode 100644 examples/jsx_demo/pubspec.yaml create mode 100644 examples/jsx_demo/test/counter_test.dart create mode 100644 examples/jsx_demo/test/jsx_demo_test.dart create mode 100644 examples/jsx_demo/test/tabs_example_test.dart create mode 100644 examples/jsx_demo/test/test_helpers.dart create mode 100644 examples/jsx_demo/test/test_template.html create mode 100644 examples/jsx_demo/web/app.dart create mode 100644 examples/jsx_demo/web/index.html create mode 100644 examples/too_many_cooks/lib/src/tools/admin_tool.dart create mode 100644 packages/dart_jsx/bin/jsx.dart create mode 100644 packages/dart_jsx/lib/dart_jsx.dart create mode 100644 packages/dart_jsx/lib/src/parser.dart create mode 100644 packages/dart_jsx/lib/src/result_aliases.dart create mode 100644 packages/dart_jsx/lib/src/transformer.dart create mode 100644 packages/dart_jsx/lib/src/transpiler.dart create mode 100644 packages/dart_jsx/pubspec.lock create mode 100644 packages/dart_jsx/pubspec.yaml create mode 100644 packages/dart_jsx/syntaxes/dart-jsx.tmLanguage.json create mode 100644 packages/dart_jsx/test/integration_test.dart create mode 100644 packages/dart_jsx/test/transpiler_test.dart create mode 100644 packages/dart_node_react_native/lib/src/navigation_types.dart create mode 100644 packages/dart_node_react_native/lib/src/npm_component.dart create mode 100644 packages/dart_node_react_native/test/npm_component_test.dart diff --git a/.vscode/extensions/dart-jsx/QUICKSTART.md b/.vscode/extensions/dart-jsx/QUICKSTART.md new file mode 100644 index 0000000..00d5341 --- /dev/null +++ b/.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 `
` 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 + +
; +``` + +## 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 diff --git a/.vscode/extensions/dart-jsx/TEST_PATTERNS.jsx b/.vscode/extensions/dart-jsx/TEST_PATTERNS.jsx new file mode 100644 index 0000000..50fd8fd --- /dev/null +++ b/.vscode/extensions/dart-jsx/TEST_PATTERNS.jsx @@ -0,0 +1,211 @@ +/// Comprehensive test file for Dart JSX syntax highlighting +/// This file tests ALL JSX patterns that should be highlighted correctly + +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +// TEST 1: Self-closing tags +ReactElement Test1() { + return ; +} + +// TEST 2: Self-closing tags with attributes +ReactElement Test2() { + return ; +} + +// TEST 3: Self-closing tags with expression attributes +ReactElement Test3() { + return handler()} />; +} + +// TEST 4: Tags with children +ReactElement Test4() { + return
text content
; +} + +// TEST 5: Nested tags +ReactElement Test5() { + return
nested text
; +} + +// TEST 6: Multiple nested levels +ReactElement Test6() { + return
+
+

Title

+
+
; +} + +// TEST 7: JSX expressions +ReactElement Test7() { + final name = 'World'; + return
{name}
; +} + +// TEST 8: Nested expressions (object literals) +ReactElement Test8() { + return
+ Styled text +
; +} + +// TEST 9: Multiple attributes - string values +ReactElement Test9() { + return
+ Text +
; +} + +// TEST 10: Multiple attributes - expression values +ReactElement Test10() { + final value = 10; + return print(e)} + disabled={false} + />; +} + +// TEST 11: Spread attributes (if supported) +ReactElement Test11(Map props) { + // Note: Spread syntax may not be supported yet + return ; +} + +// TEST 12: Boolean attributes +ReactElement Test12() { + return ; +} + +// TEST 13: Conditional expressions in JSX +ReactElement Test13(bool show) { + return
{show ? Visible : null}
; +} + +// TEST 14: Lists/arrays in JSX +ReactElement Test14(List items) { + return
    + {items.map((item) =>
  • {item}
    • ).toList()} +
; +} + +// TEST 15: Mixed content +ReactElement Test15() { + return
+ Text before + bold text + Text after +
; +} + +// TEST 16: Event handlers +ReactElement Test16() { + return ; +} + +// TEST 17: Component composition +ReactElement Test17() { + return
+
+ + +
+ +
+
; +} + +// TEST 18: Complex expressions +ReactElement Test18(int count) { + return
+ Count: {count} + Double: {count * 2} + Message: {count > 10 ? 'High' : 'Low'} +
; +} + +// TEST 19: String attribute escaping +ReactElement Test19() { + return
+ Content +
; +} + +// TEST 20: Multiline JSX +ReactElement Test20() { + return
+

Title

+

Paragraph with {2 + 2} expression

+
    +
  • Item 1
    • +
  • Item 2
    • +
+
; +} + +// TEST 21: Adjacent JSX elements (fragments would need <>...) +ReactElement Test21() { + return
+ First + Second +
; +} + +// TEST 22: Deeply nested expressions +ReactElement Test22() { + final data = {'user': {'name': 'John', 'age': 30}}; + return
+ {data['user']?['name'] ?? 'Unknown'} +
; +} + +// TEST 23: Callback with multiple statements +ReactElement Test23() { + return ; +} + +// TEST 24: Custom component with PascalCase +ReactElement Test24() { + return handleAction(data)} + />; +} + +// TEST 25: HTML-like elements (lowercase) +ReactElement Test25() { + return
+ + + Text +
; +} + +void handleAction(dynamic data) {} +ReactElement Header() =>
Header
; +ReactElement Content({List? children}) =>
{children}
; +ReactElement Sidebar() =>
Sidebar
; +ReactElement Main() =>
Main
; +ReactElement Footer() =>
Footer
; +ReactElement MyCustomComponent({String? propName, Function? onAction}) =>
; +void handler() {} diff --git a/.vscode/extensions/dart-jsx/language-configuration.json b/.vscode/extensions/dart-jsx/language-configuration.json new file mode 100644 index 0000000..ca7a801 --- /dev/null +++ b/.vscode/extensions/dart-jsx/language-configuration.json @@ -0,0 +1,36 @@ +{ + "comments": { + "lineComment": "//", + "blockComment": ["/*", "*/"] + }, + "brackets": [ + ["{", "}"], + ["[", "]"], + ["(", ")"], + ["<", ">"] + ], + "autoClosingPairs": [ + { "open": "{", "close": "}" }, + { "open": "[", "close": "]" }, + { "open": "(", "close": ")" }, + { "open": "'", "close": "'", "notIn": ["string", "comment"] }, + { "open": "\"", "close": "\"", "notIn": ["string"] }, + { "open": "`", "close": "`", "notIn": ["string", "comment"] }, + { "open": "<", "close": ">", "notIn": ["string"] } + ], + "surroundingPairs": [ + ["{", "}"], + ["[", "]"], + ["(", ")"], + ["'", "'"], + ["\"", "\""], + ["`", "`"], + ["<", ">"] + ], + "folding": { + "markers": { + "start": "^\\s*//\\s*#?region\\b", + "end": "^\\s*//\\s*#?endregion\\b" + } + } +} diff --git a/.vscode/extensions/dart-jsx/package.json b/.vscode/extensions/dart-jsx/package.json new file mode 100644 index 0000000..ce80502 --- /dev/null +++ b/.vscode/extensions/dart-jsx/package.json @@ -0,0 +1,30 @@ +{ + "name": "dart-jsx-syntax", + "displayName": "Dart JSX Syntax", + "description": "Syntax highlighting for JSX in Dart files", + "version": "0.0.1", + "engines": { + "vscode": "^1.60.0" + }, + "categories": ["Programming Languages"], + "contributes": { + "languages": [ + { + "id": "dart-jsx", + "aliases": ["Dart JSX", "dart-jsx"], + "extensions": [".jsx"], + "configuration": "./language-configuration.json" + } + ], + "grammars": [ + { + "language": "dart-jsx", + "scopeName": "source.dart.jsx", + "path": "./syntaxes/dart-jsx.tmLanguage.json", + "embeddedLanguages": { + "source.dart": "dart" + } + } + ] + } +} diff --git a/.vscode/extensions/dart-jsx/syntaxes/dart-jsx.tmLanguage.json b/.vscode/extensions/dart-jsx/syntaxes/dart-jsx.tmLanguage.json new file mode 100644 index 0000000..41e63d9 --- /dev/null +++ b/.vscode/extensions/dart-jsx/syntaxes/dart-jsx.tmLanguage.json @@ -0,0 +1,211 @@ +{ + "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json", + "name": "Dart JSX", + "scopeName": "source.dart.jsx", + "patterns": [ + { "include": "#jsx-element" }, + { "include": "source.dart" } + ], + "repository": { + "jsx-element": { + "patterns": [ + { "include": "#jsx-tag-without-attributes" }, + { "include": "#jsx-tag-without-attributes-lowercase" }, + { "include": "#jsx-tag-with-attributes" }, + { "include": "#jsx-tag-with-attributes-lowercase" }, + { "include": "#jsx-tag-self-closing" }, + { "include": "#jsx-tag-self-closing-lowercase" }, + { "include": "#jsx-tag-close" } + ] + }, + "jsx-tag-without-attributes": { + "name": "meta.tag.without-attributes.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-children" } + ] + }, + "jsx-tag-without-attributes-lowercase": { + "name": "meta.tag.without-attributes.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-children" } + ] + }, + "jsx-tag-with-attributes": { + "name": "meta.tag.with-attributes.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(?=[\\s\\n{])", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { + "begin": "\\G", + "end": "(>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + { "include": "#jsx-children" } + ] + }, + "jsx-tag-with-attributes-lowercase": { + "name": "meta.tag.with-attributes.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(?=[\\s\\n{])", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { + "begin": "\\G", + "end": "(>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + { "include": "#jsx-children" } + ] + }, + "jsx-tag-self-closing": { + "name": "meta.tag.self-closing.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(?=[\\s\\n{]|/>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" } + }, + "end": "(/>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + "jsx-tag-self-closing-lowercase": { + "name": "meta.tag.self-closing.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(?=[\\s\\n{]|/>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" } + }, + "end": "(/>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + "jsx-tag-close": { + "name": "meta.tag.close.jsx", + "match": "()", + "captures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + } + }, + "jsx-attribute": { + "patterns": [ + { + "name": "entity.other.attribute-name.jsx", + "match": "\\b[a-zA-Z_][a-zA-Z0-9_-]*\\b(?=\\s*=)" + }, + { + "name": "string.quoted.double.jsx", + "begin": "\"", + "end": "\"", + "patterns": [ + { "name": "constant.character.escape.jsx", "match": "\\\\." } + ] + }, + { + "name": "string.quoted.single.jsx", + "begin": "'", + "end": "'", + "patterns": [ + { "name": "constant.character.escape.jsx", "match": "\\\\." } + ] + }, + { "include": "#jsx-expression" } + ] + }, + "jsx-children": { + "patterns": [ + { "include": "#jsx-element" }, + { "include": "#jsx-expression" }, + { + "name": "string.unquoted.jsx", + "match": "[^<>{}]+" + } + ] + }, + "jsx-expression": { + "name": "meta.embedded.expression.jsx", + "begin": "\\{", + "beginCaptures": { + "0": { "name": "punctuation.section.embedded.begin.jsx" } + }, + "end": "\\}", + "endCaptures": { + "0": { "name": "punctuation.section.embedded.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-nested-braces" }, + { "include": "source.dart" } + ] + }, + "jsx-nested-braces": { + "begin": "\\{", + "beginCaptures": { "0": { "name": "punctuation.section.block.begin.dart" } }, + "end": "\\}", + "endCaptures": { "0": { "name": "punctuation.section.block.end.dart" } }, + "patterns": [ + { "include": "#jsx-nested-braces" }, + { "include": "source.dart" } + ] + } + } +} diff --git a/.vscode/launch.json b/.vscode/launch.json index 182fd27..bb87c40 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -70,6 +70,20 @@ "program": "${workspaceFolder}/examples/backend/test/server_test.dart", "cwd": "${workspaceFolder}/examples/backend" }, + { + "name": "JSX Demo Tests (Chrome)", + "type": "node-terminal", + "request": "launch", + "command": "cd ${workspaceFolder}/examples/jsx_demo && dart test -p chrome", + "cwd": "${workspaceFolder}" + }, + { + "name": "Frontend Tests (Chrome)", + "type": "node-terminal", + "request": "launch", + "command": "cd ${workspaceFolder}/examples/frontend && dart test -p chrome", + "cwd": "${workspaceFolder}" + }, { "name": "Coverage: Current Package", "type": "node-terminal", diff --git a/.vscode/settings.json b/.vscode/settings.json index 57c528f..432a5ee 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,6 +4,8 @@ "dart.cliConsole": "terminal", "dart.debugExternalPackageLibraries": false, "dart.debugSdkLibraries": false, + "dart.lineLength": 80, + "dart.analysisExcludedFolders": [], "dart.env": { "DART_NODE_COVERAGE": "1" @@ -13,6 +15,7 @@ "testing.defaultGutterClickAction": "run", "files.exclude": { + "**/*.g.dart": false, "**/coverage/": false }, "files.watcherExclude": { @@ -20,11 +23,55 @@ "**/build/**": true, "**/.dart_tool/**": true }, + "files.associations": { + "*.jsx": "dart-jsx" + }, "editor.formatOnSave": true, "[dart]": { "editor.formatOnSave": true, "editor.defaultFormatter": "Dart-Code.dart-code", "editor.rulers": [80] + }, + + "editor.tokenColorCustomizations": { + "textMateRules": [ + { + "scope": "entity.name.tag.jsx", + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "scope": "support.class.component.jsx", + "settings": { + "foreground": "#4EC9B0" + } + }, + { + "scope": "entity.other.attribute-name.jsx", + "settings": { + "foreground": "#9CDCFE" + } + }, + { + "scope": "punctuation.definition.tag.jsx", + "settings": { + "foreground": "#808080" + } + }, + { + "scope": "punctuation.section.embedded.begin.jsx", + "settings": { + "foreground": "#FFD700" + } + }, + { + "scope": "punctuation.section.embedded.end.jsx", + "settings": { + "foreground": "#FFD700" + } + } + ] } } diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 0f28c34..ce52062 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -24,6 +24,26 @@ }, "detail": "Run tests with coverage for the current package (Ctrl+Shift+T)" }, + { + "label": "transpile-jsx", + "type": "shell", + "command": "dart", + "args": [ + "run", + "${workspaceFolder}/packages/dart_jsx/bin/jsx.dart", + "${file}", + "${fileDirname}/${fileBasenameNoExtension}.g.dart" + ], + "options": { + "cwd": "${workspaceFolder}" + }, + "group": "build", + "presentation": { + "reveal": "silent", + "panel": "shared" + }, + "problemMatcher": [] + }, { "label": "build-backend", "type": "shell", @@ -101,6 +121,28 @@ "group": "test", "problemMatcher": ["$dart"] }, + { + "label": "test-jsx-demo", + "type": "shell", + "command": "dart", + "args": ["test", "-p", "chrome"], + "options": { + "cwd": "${workspaceFolder}/examples/jsx_demo" + }, + "group": "test", + "problemMatcher": ["$dart"] + }, + { + "label": "test-frontend", + "type": "shell", + "command": "dart", + "args": ["test", "-p", "chrome"], + "options": { + "cwd": "${workspaceFolder}/examples/frontend" + }, + "group": "test", + "problemMatcher": ["$dart"] + }, { "label": "coverage: current package", "type": "shell", diff --git a/AGENTS.md b/AGENTS.md index 558dbcb..cf9915b 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -4,8 +4,8 @@ Dart packages for building Node.js apps. Typed Dart layer over JS interop. ## Multi-Agent Coordination (Too Many Cooks) - Check messages regularly, lock files before editing, unlock after -- Don't edit locked files; signal intent via plans -- Coordinator: keep delegating. Worker: keep asking for tasks +- Don't edit locked files; signal intent via plans and messages +- Coordinator: keep delegating via messages. Worker: keep asking for tasks via messages - Clean up expired locks routinely ## Code Rules diff --git a/CLAUDE.md b/CLAUDE.md index 558dbcb..cf9915b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -4,8 +4,8 @@ Dart packages for building Node.js apps. Typed Dart layer over JS interop. ## Multi-Agent Coordination (Too Many Cooks) - Check messages regularly, lock files before editing, unlock after -- Don't edit locked files; signal intent via plans -- Coordinator: keep delegating. Worker: keep asking for tasks +- Don't edit locked files; signal intent via plans and messages +- Coordinator: keep delegating via messages. Worker: keep asking for tasks via messages - Clean up expired locks routinely ## Code Rules diff --git a/analysis_options.yaml b/analysis_options.yaml new file mode 100644 index 0000000..9de0748 --- /dev/null +++ b/analysis_options.yaml @@ -0,0 +1,5 @@ +analyzer: + exclude: + - "**/*.jsx" + - "**/node_modules/**" + - "**/.dart_tool/**" diff --git a/cspell-dictionary.txt b/cspell-dictionary.txt index 477d80a..482ff55 100644 --- a/cspell-dictionary.txt +++ b/cspell-dictionary.txt @@ -124,6 +124,7 @@ Transpiles Transpiling checkpointed unskip +unconfigured # Project-specific christianfindlay @@ -238,4 +239,3 @@ LTWH blockquotes Blockquotes strikethrough -unconfigured diff --git a/docs/npm_usage.md b/docs/npm_usage.md new file mode 100644 index 0000000..94c2aaf --- /dev/null +++ b/docs/npm_usage.md @@ -0,0 +1,330 @@ +# Using npm React/React Native Packages Directly in Dart + +## The Core Idea + +**You can use ANY npm React/React Native package DIRECTLY without writing Dart wrappers.** + +The `npmComponent()` function lets you drop in npm packages and use them exactly like you would in TypeScript - no recreating libraries, no wrapper functions, just direct usage. + +## Basic Usage + +```dart +import 'package:dart_node_react_native/dart_node_react_native.dart'; + +// Use react-native-paper Button DIRECTLY +final button = npmComponent( + 'react-native-paper', // npm package name + 'Button', // component name + props: {'mode': 'contained', 'onPress': handlePress}, + child: 'Click Me'.toJS, +); + +// Use react-native-paper FAB +final fab = npmComponent( + 'react-native-paper', + 'FAB', + props: {'icon': 'plus', 'onPress': handleAdd}, +); + +// Use react-native-paper Card +final card = npmComponent( + 'react-native-paper', + 'Card', + children: [cardContent, cardActions], +); +``` + +## Navigation Example + +```dart +// NavigationContainer from @react-navigation/native +final navContainer = npmComponent( + '@react-navigation/native', + 'NavigationContainer', + children: [stackNavigator], +); + +// Stack.Screen from @react-navigation/stack +final homeScreen = npmComponent( + '@react-navigation/stack', + 'Screen', + props: { + 'name': 'Home', + 'component': homeComponent, + 'options': {'title': 'Home Screen'}, + }, +); +``` + +## Factory Functions + +For packages that export factory functions (like createStackNavigator): + +```dart +// Get the factory function +final createStack = npmFactory( + '@react-navigation/stack', + 'createStackNavigator', +); + +// Call the factory +final Stack = createStack.value!.callAsFunction(); +``` + +## What NOT To Do + +❌ **DON'T create wrapper functions for every component:** +```dart +// WRONG - Don't do this! +PaperButtonElement paperButton({PaperButtonProps? props, ...}) { + // ... wrapper code +} +``` + +❌ **DON'T recreate entire libraries in Dart:** +```dart +// WRONG - Don't recreate npm packages! +typedef PaperButtonProps = ({ + PaperButtonMode? mode, + bool? dark, + // ... 20 more fields +}); +``` + +✅ **DO use npmComponent() directly:** +```dart +// CORRECT - Direct usage! +final button = npmComponent('react-native-paper', 'Button', props: {...}); +``` + +## Why This Approach? + +1. **Works with ANY npm package immediately** - no wrapper code needed +2. **Native modules work** - camera, storage, maps, etc. +3. **TypeScript props map directly** - just use a Map +4. **Zero maintenance** - npm packages update, your code still works + +## Props Mapping (TypeScript → Dart) + +| TypeScript | Dart | +|------------|------| +| `string` | `String` | +| `number` | `num` / `int` / `double` | +| `boolean` | `bool` | +| `() => void` | `void Function()` | +| `{key: value}` | `Map` | +| `T \| undefined` | nullable in the Map | + +## Example: Full Screen with Paper + Navigation + +```dart +import 'package:dart_node_react_native/dart_node_react_native.dart'; + +ReactElement homeScreen(JSObject props) { + final (count, setCount) = useState(0); + + return npmComponent( + 'react-native', + 'View', + props: {'style': {'flex': 1, 'padding': 16}}, + children: [ + // Paper Button + npmComponent( + 'react-native-paper', + 'Button', + props: { + 'mode': 'contained', + 'onPress': () => setCount(count + 1), + }, + child: 'Count: $count'.toJS, + ), + + // Paper TextInput + npmComponent( + 'react-native-paper', + 'TextInput', + props: { + 'label': 'Enter text', + 'mode': 'outlined', + }, + ), + + // Paper Card + npmComponent( + 'react-native-paper', + 'Card', + children: [ + npmComponent('react-native-paper', 'Card.Title', + props: {'title': 'My Card'}), + npmComponent('react-native-paper', 'Card.Content', + children: [ + npmComponent('react-native-paper', 'Text', + child: 'Card content here'.toJS), + ]), + ], + ), + ], + ); +} +``` + +## Adding Your Own Types (Easy!) + +Start loose with `npmComponent()`, then add types WHERE YOU NEED THEM. + +### Step 1: Create a Typed Element (Extension Type) + +```dart +/// Typed element for Paper Button - zero-cost wrapper +extension type PaperButton._(NpmComponentElement _) implements ReactElement { + factory PaperButton._create(NpmComponentElement e) = PaperButton._; +} +``` + +### Step 2: Create a Typed Props Record + +```dart +/// Props for Paper Button - full autocomplete! +typedef PaperButtonProps = ({ + String? mode, // 'text' | 'outlined' | 'contained' | 'elevated' + bool? disabled, + bool? loading, + String? buttonColor, + String? textColor, +}); +``` + +### Step 3: Create a Typed Factory Function + +```dart +/// Create a Paper Button with full type safety +PaperButton paperButton({ + PaperButtonProps? props, + void Function()? onPress, + String? label, +}) { + final p = {}; + if (props != null) { + if (props.mode != null) p['mode'] = props.mode; + if (props.disabled != null) p['disabled'] = props.disabled; + if (props.loading != null) p['loading'] = props.loading; + if (props.buttonColor != null) p['buttonColor'] = props.buttonColor; + if (props.textColor != null) p['textColor'] = props.textColor; + } + if (onPress != null) p['onPress'] = onPress; + + return PaperButton._create(npmComponent( + 'react-native-paper', + 'Button', + props: p, + child: label?.toJS, + )); +} +``` + +### Usage - Now With Types! + +```dart +// Full autocomplete and type checking! +final btn = paperButton( + props: ( + mode: 'contained', + disabled: false, + loading: isSubmitting, + buttonColor: '#6200EE', + textColor: null, + ), + onPress: handleSubmit, + label: 'Submit', +); +``` + +### The Pattern + +1. **Extension type** - Zero-cost typed wrapper over `NpmComponentElement` +2. **Props typedef** - Named record with all the TypeScript props you care about +3. **Factory function** - Builds the props Map and calls `npmComponent()` + +### When to Add Types + +- Components you use **frequently** (Button, Text, View) +- Components with **complex props** (Navigation, Forms) +- Components where **autocomplete helps** (many optional props) + +### When NOT to Add Types + +- One-off usage of a component +- Simple components with 1-2 props +- Prototyping / exploring a new npm package + +### Full Example: Typed Paper Components + +```dart +// ===== Extension Types ===== +extension type PaperButton._(NpmComponentElement _) implements ReactElement {} +extension type PaperFAB._(NpmComponentElement _) implements ReactElement {} +extension type PaperCard._(NpmComponentElement _) implements ReactElement {} + +// ===== Props Typedefs ===== +typedef PaperButtonProps = ({ + String? mode, + bool? disabled, + bool? loading, + String? buttonColor, +}); + +typedef PaperFABProps = ({ + String? icon, + String? label, + bool? small, + bool? visible, +}); + +// ===== Factory Functions ===== +PaperButton paperButton({ + PaperButtonProps? props, + void Function()? onPress, + String? label, +}) => PaperButton._(npmComponent( + 'react-native-paper', 'Button', + props: { + if (props?.mode != null) 'mode': props!.mode, + if (props?.disabled != null) 'disabled': props!.disabled, + if (onPress != null) 'onPress': onPress, + }, + child: label?.toJS, +)); + +PaperFAB paperFAB({ + PaperFABProps? props, + void Function()? onPress, +}) => PaperFAB._(npmComponent( + 'react-native-paper', 'FAB', + props: { + if (props?.icon != null) 'icon': props!.icon, + if (props?.label != null) 'label': props!.label, + if (onPress != null) 'onPress': onPress, + }, +)); + +// ===== Usage ===== +final myButton = paperButton( + props: (mode: 'contained', disabled: false, loading: false, buttonColor: null), + onPress: () => print('Pressed!'), + label: 'Click Me', +); + +final myFAB = paperFAB( + props: (icon: 'plus', label: 'Add', small: false, visible: true), + onPress: handleAdd, +); +``` + +## Key Insight + +**Start loose, add types as needed.** + +- `npmComponent()` works with ANY package IMMEDIATELY +- Add typed wrappers only for components YOU use frequently +- Extension types are zero-cost - no runtime overhead +- Props records give full autocomplete in your IDE diff --git a/examples/jsx_demo/analysis_options.yaml b/examples/jsx_demo/analysis_options.yaml new file mode 100644 index 0000000..1ffb772 --- /dev/null +++ b/examples/jsx_demo/analysis_options.yaml @@ -0,0 +1,3 @@ +analyzer: + exclude: + - "**/*.jsx" diff --git a/examples/jsx_demo/dart_test.yaml b/examples/jsx_demo/dart_test.yaml new file mode 100644 index 0000000..1d9e304 --- /dev/null +++ b/examples/jsx_demo/dart_test.yaml @@ -0,0 +1,8 @@ +platforms: [chrome] + +override_platforms: + chrome: + settings: + arguments: --disable-gpu --no-sandbox + +custom_html_template_path: test/test_template.html diff --git a/examples/jsx_demo/lib/counter.g.dart b/examples/jsx_demo/lib/counter.g.dart new file mode 100644 index 0000000..53e3c29 --- /dev/null +++ b/examples/jsx_demo/lib/counter.g.dart @@ -0,0 +1,25 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND +// Generated from: counter.jsx + +/// Counter component using JSX syntax. +/// +/// This demonstrates how to write React components in Dart using JSX. +/// The .jsx.dart file gets transpiled to pure Dart before compilation. +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +/// A counter component with increment, decrement, and reset. +ReactElement Counter() { + final count = useState(0); + + return $div(className: 'counter') >> [ + $h1 >> 'Dart + JSX', + $div(className: 'value') >> count.value, + $div(className: 'buttons') >> [ + $button(className: 'btn-dec', onClick: () => count.set(count.value - 1)) >> '-', + $button(className: 'btn-inc', onClick: () => count.set(count.value + 1)) >> '+', + ], + $div(className: 'buttons') >> ($button(className: 'btn-reset', onClick: () => count.set(0)) >> 'Reset'), +]; +} diff --git a/examples/jsx_demo/lib/counter.jsx b/examples/jsx_demo/lib/counter.jsx new file mode 100644 index 0000000..d31f994 --- /dev/null +++ b/examples/jsx_demo/lib/counter.jsx @@ -0,0 +1,30 @@ +/// Counter component using JSX syntax. +/// +/// This demonstrates how to write React components in Dart using JSX. +/// The .jsx.dart file gets transpiled to pure Dart before compilation. +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +/// A counter component with increment, decrement, and reset. +ReactElement Counter() { + final count = useState(0); + + return
+

Dart + JSX

+
{count.value}
+
+ + +
+
+ +
+
; +} diff --git a/examples/jsx_demo/lib/tabs_example.g.dart b/examples/jsx_demo/lib/tabs_example.g.dart new file mode 100644 index 0000000..72f6659 --- /dev/null +++ b/examples/jsx_demo/lib/tabs_example.g.dart @@ -0,0 +1,45 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND +// Generated from: tabs_example.jsx + +/// Tabs component using JSX syntax. +/// +/// Demonstrates: +/// - Conditional rendering +/// - Dynamic class names +/// - State management for active tab +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +/// A tabbed interface component. +ReactElement TabsExample() { + final activeTab = useState('home'); + + final homeContent = 'Welcome to the home tab. This is the main content area.'; + final profileContent = 'View and edit your profile settings here.'; + final settingsContent = 'Configure your application preferences.'; + + final currentContent = switch (activeTab.value) { + 'home' => homeContent, + 'profile' => profileContent, + 'settings' => settingsContent, + _ => homeContent, + }; + + final currentLabel = switch (activeTab.value) { + 'home' => 'Home', + 'profile' => 'Profile', + 'settings' => 'Settings', + _ => 'Home', + }; + + return $div(className: 'tabs-container') >> [ + $h1 >> 'Tabbed Interface', + $div(className: 'tab-buttons') >> [ + $button(className: activeTab.value == 'home' ? 'tab-btn active' : 'tab-btn', onClick: () => activeTab.set('home')) >> 'Home', + $button(className: activeTab.value == 'profile' ? 'tab-btn active' : 'tab-btn', onClick: () => activeTab.set('profile')) >> 'Profile', + $button(className: activeTab.value == 'settings' ? 'tab-btn active' : 'tab-btn', onClick: () => activeTab.set('settings')) >> 'Settings', + ], + $div(className: 'tab-content') >> [$h2 >> currentLabel, $p() >> currentContent], +]; +} diff --git a/examples/jsx_demo/lib/tabs_example.jsx b/examples/jsx_demo/lib/tabs_example.jsx new file mode 100644 index 0000000..7dfff2d --- /dev/null +++ b/examples/jsx_demo/lib/tabs_example.jsx @@ -0,0 +1,62 @@ +/// Tabs component using JSX syntax. +/// +/// Demonstrates: +/// - Conditional rendering +/// - Dynamic class names +/// - State management for active tab +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +/// A tabbed interface component. +ReactElement TabsExample() { + final activeTab = useState('home'); + + final homeContent = 'Welcome to the home tab. This is the main content area.'; + final profileContent = 'View and edit your profile settings here.'; + final settingsContent = 'Configure your application preferences.'; + + final currentContent = switch (activeTab.value) { + 'home' => homeContent, + 'profile' => profileContent, + 'settings' => settingsContent, + _ => homeContent, + }; + + final currentLabel = switch (activeTab.value) { + 'home' => 'Home', + 'profile' => 'Profile', + 'settings' => 'Settings', + _ => 'Home', + }; + + return
+

Tabbed Interface

+ +
+ + + +
+ +
+

{currentLabel}

+

{currentContent}

+
+
; +} diff --git a/examples/jsx_demo/pubspec.lock b/examples/jsx_demo/pubspec.lock new file mode 100644 index 0000000..e0dba26 --- /dev/null +++ b/examples/jsx_demo/pubspec.lock @@ -0,0 +1,411 @@ +# Generated by pub +# See https://dart.dev/tools/pub/glossary#lockfile +packages: + _fe_analyzer_shared: + dependency: transitive + description: + name: _fe_analyzer_shared + sha256: "5b7468c326d2f8a4f630056404ca0d291ade42918f4a3c6233618e724f39da8e" + url: "https://pub.dev" + source: hosted + version: "92.0.0" + analyzer: + dependency: transitive + description: + name: analyzer + sha256: "70e4b1ef8003c64793a9e268a551a82869a8a96f39deb73dea28084b0e8bf75e" + url: "https://pub.dev" + source: hosted + version: "9.0.0" + args: + dependency: transitive + description: + name: args + sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04 + url: "https://pub.dev" + source: hosted + version: "2.7.0" + async: + dependency: transitive + description: + name: async + sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb" + url: "https://pub.dev" + source: hosted + version: "2.13.0" + austerity: + dependency: "direct main" + description: + name: austerity + sha256: e81f52faa46859ed080ad6c87de3409b379d162c083151d6286be6eb7b71f816 + url: "https://pub.dev" + source: hosted + version: "1.3.0" + boolean_selector: + dependency: transitive + description: + name: boolean_selector + sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea" + url: "https://pub.dev" + source: hosted + version: "2.1.2" + cli_config: + dependency: transitive + description: + name: cli_config + sha256: ac20a183a07002b700f0c25e61b7ee46b23c309d76ab7b7640a028f18e4d99ec + url: "https://pub.dev" + source: hosted + version: "0.2.0" + collection: + dependency: transitive + description: + name: collection + sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76" + url: "https://pub.dev" + source: hosted + version: "1.19.1" + convert: + dependency: transitive + description: + name: convert + sha256: b30acd5944035672bc15c6b7a8b47d773e41e2f17de064350988c5d02adb1c68 + url: "https://pub.dev" + source: hosted + version: "3.1.2" + coverage: + dependency: transitive + description: + name: coverage + sha256: "5da775aa218eaf2151c721b16c01c7676fbfdd99cebba2bf64e8b807a28ff94d" + url: "https://pub.dev" + source: hosted + version: "1.15.0" + crypto: + dependency: transitive + description: + name: crypto + sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf + url: "https://pub.dev" + source: hosted + version: "3.0.7" + dart_node_core: + dependency: transitive + description: + path: "../../packages/dart_node_core" + relative: true + source: path + version: "0.9.0-beta" + dart_node_react: + dependency: "direct main" + description: + path: "../../packages/dart_node_react" + relative: true + source: path + version: "0.9.0-beta" + file: + dependency: transitive + description: + name: file + sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4 + url: "https://pub.dev" + source: hosted + version: "7.0.1" + frontend_server_client: + dependency: transitive + description: + name: frontend_server_client + sha256: f64a0333a82f30b0cca061bc3d143813a486dc086b574bfb233b7c1372427694 + url: "https://pub.dev" + source: hosted + version: "4.0.0" + glob: + dependency: transitive + description: + name: glob + sha256: c3f1ee72c96f8f78935e18aa8cecced9ab132419e8625dc187e1c2408efc20de + url: "https://pub.dev" + source: hosted + version: "2.1.3" + http_multi_server: + dependency: transitive + description: + name: http_multi_server + sha256: aa6199f908078bb1c5efb8d8638d4ae191aac11b311132c3ef48ce352fb52ef8 + url: "https://pub.dev" + source: hosted + version: "3.2.2" + http_parser: + dependency: transitive + description: + name: http_parser + sha256: "178d74305e7866013777bab2c3d8726205dc5a4dd935297175b19a23a2e66571" + url: "https://pub.dev" + source: hosted + version: "4.1.2" + io: + dependency: transitive + description: + name: io + sha256: dfd5a80599cf0165756e3181807ed3e77daf6dd4137caaad72d0b7931597650b + url: "https://pub.dev" + source: hosted + version: "1.0.5" + logging: + dependency: transitive + description: + name: logging + sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61 + url: "https://pub.dev" + source: hosted + version: "1.3.0" + matcher: + dependency: transitive + description: + name: matcher + sha256: "12956d0ad8390bbcc63ca2e1469c0619946ccb52809807067a7020d57e647aa6" + url: "https://pub.dev" + source: hosted + version: "0.12.18" + meta: + dependency: transitive + description: + name: meta + sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394" + url: "https://pub.dev" + source: hosted + version: "1.17.0" + mime: + dependency: transitive + description: + name: mime + sha256: "41a20518f0cb1256669420fdba0cd90d21561e560ac240f26ef8322e45bb7ed6" + url: "https://pub.dev" + source: hosted + version: "2.0.0" + nadz: + dependency: "direct main" + description: + name: nadz + sha256: "749586d5d9c94c3660f85c4fa41979345edd5179ef221d6ac9127f36ca1674f8" + url: "https://pub.dev" + source: hosted + version: "0.0.7-beta" + node_preamble: + dependency: transitive + description: + name: node_preamble + sha256: "6e7eac89047ab8a8d26cf16127b5ed26de65209847630400f9aefd7cd5c730db" + url: "https://pub.dev" + source: hosted + version: "2.0.2" + package_config: + dependency: transitive + description: + name: package_config + sha256: f096c55ebb7deb7e384101542bfba8c52696c1b56fca2eb62827989ef2353bbc + url: "https://pub.dev" + source: hosted + version: "2.2.0" + path: + dependency: transitive + description: + name: path + sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5" + url: "https://pub.dev" + source: hosted + version: "1.9.1" + pool: + dependency: transitive + description: + name: pool + sha256: "978783255c543aa3586a1b3c21f6e9d720eb315376a915872c61ef8b5c20177d" + url: "https://pub.dev" + source: hosted + version: "1.5.2" + pub_semver: + dependency: transitive + description: + name: pub_semver + sha256: "5bfcf68ca79ef689f8990d1160781b4bad40a3bd5e5218ad4076ddb7f4081585" + url: "https://pub.dev" + source: hosted + version: "2.2.0" + shelf: + dependency: transitive + description: + name: shelf + sha256: e7dd780a7ffb623c57850b33f43309312fc863fb6aa3d276a754bb299839ef12 + url: "https://pub.dev" + source: hosted + version: "1.4.2" + shelf_packages_handler: + dependency: transitive + description: + name: shelf_packages_handler + sha256: "89f967eca29607c933ba9571d838be31d67f53f6e4ee15147d5dc2934fee1b1e" + url: "https://pub.dev" + source: hosted + version: "3.0.2" + shelf_static: + dependency: transitive + description: + name: shelf_static + sha256: c87c3875f91262785dade62d135760c2c69cb217ac759485334c5857ad89f6e3 + url: "https://pub.dev" + source: hosted + version: "1.1.3" + shelf_web_socket: + dependency: transitive + description: + name: shelf_web_socket + sha256: "3632775c8e90d6c9712f883e633716432a27758216dfb61bd86a8321c0580925" + url: "https://pub.dev" + source: hosted + version: "3.0.0" + source_map_stack_trace: + dependency: transitive + description: + name: source_map_stack_trace + sha256: c0713a43e323c3302c2abe2a1cc89aa057a387101ebd280371d6a6c9fa68516b + url: "https://pub.dev" + source: hosted + version: "2.1.2" + source_maps: + dependency: transitive + description: + name: source_maps + sha256: "190222579a448b03896e0ca6eca5998fa810fda630c1d65e2f78b3f638f54812" + url: "https://pub.dev" + source: hosted + version: "0.10.13" + source_span: + dependency: transitive + description: + name: source_span + sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c" + url: "https://pub.dev" + source: hosted + version: "1.10.1" + stack_trace: + dependency: transitive + description: + name: stack_trace + sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1" + url: "https://pub.dev" + source: hosted + version: "1.12.1" + stream_channel: + dependency: transitive + description: + name: stream_channel + sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d" + url: "https://pub.dev" + source: hosted + version: "2.1.4" + string_scanner: + dependency: transitive + description: + name: string_scanner + sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43" + url: "https://pub.dev" + source: hosted + version: "1.4.1" + term_glyph: + dependency: transitive + description: + name: term_glyph + sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e" + url: "https://pub.dev" + source: hosted + version: "1.2.2" + test: + dependency: "direct dev" + description: + name: test + sha256: "77cc98ea27006c84e71a7356cf3daf9ddbde2d91d84f77dbfe64cf0e4d9611ae" + url: "https://pub.dev" + source: hosted + version: "1.28.0" + test_api: + dependency: transitive + description: + name: test_api + sha256: "19a78f63e83d3a61f00826d09bc2f60e191bf3504183c001262be6ac75589fb8" + url: "https://pub.dev" + source: hosted + version: "0.7.8" + test_core: + dependency: transitive + description: + name: test_core + sha256: f1072617a6657e5fc09662e721307f7fb009b4ed89b19f47175d11d5254a62d4 + url: "https://pub.dev" + source: hosted + version: "0.6.14" + typed_data: + dependency: transitive + description: + name: typed_data + sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006 + url: "https://pub.dev" + source: hosted + version: "1.4.0" + vm_service: + dependency: transitive + description: + name: vm_service + sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60" + url: "https://pub.dev" + source: hosted + version: "15.0.2" + watcher: + dependency: transitive + description: + name: watcher + sha256: "592ab6e2892f67760543fb712ff0177f4ec76c031f02f5b4ff8d3fc5eb9fb61a" + url: "https://pub.dev" + source: hosted + version: "1.1.4" + web: + dependency: transitive + description: + name: web + sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a" + url: "https://pub.dev" + source: hosted + version: "1.1.1" + web_socket: + dependency: transitive + description: + name: web_socket + sha256: "34d64019aa8e36bf9842ac014bb5d2f5586ca73df5e4d9bf5c936975cae6982c" + url: "https://pub.dev" + source: hosted + version: "1.0.1" + web_socket_channel: + dependency: transitive + description: + name: web_socket_channel + sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8 + url: "https://pub.dev" + source: hosted + version: "3.0.3" + webkit_inspection_protocol: + dependency: transitive + description: + name: webkit_inspection_protocol + sha256: "87d3f2333bb240704cd3f1c6b5b7acd8a10e7f0bc28c28dcf14e782014f4a572" + url: "https://pub.dev" + source: hosted + version: "1.2.1" + yaml: + dependency: transitive + description: + name: yaml + sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce + url: "https://pub.dev" + source: hosted + version: "3.1.3" +sdks: + dart: ">=3.10.0 <4.0.0" diff --git a/examples/jsx_demo/pubspec.yaml b/examples/jsx_demo/pubspec.yaml new file mode 100644 index 0000000..0b51609 --- /dev/null +++ b/examples/jsx_demo/pubspec.yaml @@ -0,0 +1,16 @@ +name: jsx_demo +description: Demo of JSX syntax in Dart +version: 0.1.0 +publish_to: none + +environment: + sdk: ^3.10.0 + +dependencies: + austerity: ^1.3.0 + dart_node_react: + path: ../../packages/dart_node_react + nadz: ^0.0.7-beta + +dev_dependencies: + test: ^1.25.0 diff --git a/examples/jsx_demo/test/counter_test.dart b/examples/jsx_demo/test/counter_test.dart new file mode 100644 index 0000000..76bd492 --- /dev/null +++ b/examples/jsx_demo/test/counter_test.dart @@ -0,0 +1,129 @@ +/// UI interaction tests for the Counter component. +/// +/// Tests verify actual user interactions using the Counter component. +/// Run with: dart test -p chrome +@TestOn('browser') +library; + +import 'dart:js_interop'; + +import 'package:dart_node_react/dart_node_react.dart' hide RenderResult, render; +import 'package:dart_node_react/src/testing_library.dart'; +import 'package:jsx_demo/counter.g.dart'; +import 'package:test/test.dart'; + +void main() { + late JSAny counterComponent; + + setUp(() { + counterComponent = registerFunctionComponent((props) => Counter()); + }); + + test('counter initializes at 0', () { + final result = render(fc(counterComponent)); + + expect(result.container.textContent, contains('Dart + JSX')); + expect(result.container.querySelector('.value')!.textContent, '0'); + + result.unmount(); + }); + + test('increment button increases count', () { + final result = render(fc(counterComponent)); + + expect(result.container.querySelector('.value')!.textContent, '0'); + + final incrementBtn = result.container.querySelector('.btn-inc')!; + fireClick(incrementBtn); + expect(result.container.querySelector('.value')!.textContent, '1'); + + fireClick(incrementBtn); + expect(result.container.querySelector('.value')!.textContent, '2'); + + result.unmount(); + }); + + test('decrement button decreases count', () { + final result = render(fc(counterComponent)); + + expect(result.container.querySelector('.value')!.textContent, '0'); + + final decrementBtn = result.container.querySelector('.btn-dec')!; + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '-1'); + + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '-2'); + + result.unmount(); + }); + + test('reset button sets count back to 0', () { + final result = render(fc(counterComponent)); + + final incrementBtn = result.container.querySelector('.btn-inc')!; + final resetBtn = result.container.querySelector('.btn-reset')!; + + fireClick(incrementBtn); + fireClick(incrementBtn); + fireClick(incrementBtn); + expect(result.container.querySelector('.value')!.textContent, '3'); + + fireClick(resetBtn); + expect(result.container.querySelector('.value')!.textContent, '0'); + + result.unmount(); + }); + + test('increment and decrement work together', () { + final result = render(fc(counterComponent)); + + final incrementBtn = result.container.querySelector('.btn-inc')!; + final decrementBtn = result.container.querySelector('.btn-dec')!; + + fireClick(incrementBtn); + fireClick(incrementBtn); + fireClick(incrementBtn); + expect(result.container.querySelector('.value')!.textContent, '3'); + + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '2'); + + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '1'); + + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '0'); + + fireClick(decrementBtn); + expect(result.container.querySelector('.value')!.textContent, '-1'); + + result.unmount(); + }); + + test('rapid clicks all register', () { + final result = render(fc(counterComponent)); + + final incrementBtn = result.container.querySelector('.btn-inc')!; + + for (var i = 1; i <= 10; i++) { + fireClick(incrementBtn); + expect(result.container.querySelector('.value')!.textContent, '$i'); + } + + result.unmount(); + }); + + test('all buttons are rendered with correct classes', () { + final result = render(fc(counterComponent)); + + expect(result.container.querySelector('.btn-inc'), isNotNull); + expect(result.container.querySelector('.btn-dec'), isNotNull); + expect(result.container.querySelector('.btn-reset'), isNotNull); + expect(result.container.querySelector('.value'), isNotNull); + expect(result.container.querySelector('.counter'), isNotNull); + expect(result.container.querySelector('.buttons'), isNotNull); + + result.unmount(); + }); +} diff --git a/examples/jsx_demo/test/jsx_demo_test.dart b/examples/jsx_demo/test/jsx_demo_test.dart new file mode 100644 index 0000000..f3de737 --- /dev/null +++ b/examples/jsx_demo/test/jsx_demo_test.dart @@ -0,0 +1,246 @@ +/// Integration tests for the JSX Demo app. +/// +/// Tests the full component tree: App with Counter AND TabsExample together. +/// Run with: dart test -p chrome +@TestOn('browser') +library; + +import 'dart:js_interop'; + +import 'package:dart_node_react/dart_node_react.dart' hide RenderResult, render; +import 'package:dart_node_react/src/testing_library.dart'; +import 'package:test/test.dart'; + +import '../web/app.dart' show App; + +void main() { + late JSAny appComponent; + + setUp(() { + appComponent = registerFunctionComponent((props) => App()); + }); + + test('renders full App with Counter and TabsExample', () { + final result = render(fc(appComponent)); + + // Counter component renders + expect(result.container.textContent, contains('Dart + JSX')); + expect(result.container.textContent, contains('-')); + expect(result.container.textContent, contains('+')); + expect(result.container.textContent, contains('Reset')); + + // TabsExample component renders + expect(result.container.textContent, contains('Tabbed Interface')); + expect(result.container.textContent, contains('Home')); + expect(result.container.textContent, contains('Profile')); + expect(result.container.textContent, contains('Settings')); + + result.unmount(); + }); + + test('Counter increment and decrement work', () { + final result = render(fc(appComponent)); + + // Find counter value display + final valueDiv = result.container.querySelector('.value'); + expect(valueDiv, isNotNull); + expect(valueDiv!.textContent, '0'); + + // Click increment button + final incButton = result.container.querySelector('.btn-inc'); + expect(incButton, isNotNull); + fireClick(incButton!); + + // Value should be 1 + expect(result.container.querySelector('.value')!.textContent, '1'); + + // Click increment again + fireClick(incButton); + expect(result.container.querySelector('.value')!.textContent, '2'); + + // Click decrement + final decButton = result.container.querySelector('.btn-dec'); + fireClick(decButton!); + expect(result.container.querySelector('.value')!.textContent, '1'); + + // Click reset + final resetButton = result.container.querySelector('.btn-reset'); + fireClick(resetButton!); + expect(result.container.querySelector('.value')!.textContent, '0'); + + result.unmount(); + }); + + test('TabsExample tab switching works', () { + final result = render(fc(appComponent)); + + // Initial state - Home tab content should show + expect( + result.container.textContent, + contains('Welcome to the home tab'), + ); + + // Find tab buttons by their text content + final tabButtons = result.container.querySelectorAll('.tab-btn'); + expect(tabButtons.length, greaterThanOrEqualTo(3)); + + // Click Profile tab (second button) + final profileButton = tabButtons[1]; + fireClick(profileButton); + + // Profile content should now show + expect( + result.container.textContent, + contains('View and edit your profile settings'), + ); + + // Click Settings tab (third button) + final settingsButton = tabButtons[2]; + fireClick(settingsButton); + + // Settings content should now show + expect( + result.container.textContent, + contains('Configure your application preferences'), + ); + + // Click back to Home tab + final homeButton = tabButtons[0]; + fireClick(homeButton); + + // Home content should show again + expect( + result.container.textContent, + contains('Welcome to the home tab'), + ); + + result.unmount(); + }); + + test('Counter and Tabs work independently without interference', () { + final result = render(fc(appComponent)); + + // Increment counter a few times + final incButton = result.container.querySelector('.btn-inc')!; + fireClick(incButton); + fireClick(incButton); + fireClick(incButton); + + expect(result.container.querySelector('.value')!.textContent, '3'); + + // Switch tabs - counter should stay at 3 + final tabButtons = result.container.querySelectorAll('.tab-btn'); + fireClick(tabButtons[1]); // Profile + + // Counter still at 3 + expect(result.container.querySelector('.value')!.textContent, '3'); + + // Tab content changed + expect( + result.container.textContent, + contains('View and edit your profile settings'), + ); + + // Switch tabs again and decrement counter + fireClick(tabButtons[2]); // Settings + final decButton = result.container.querySelector('.btn-dec')!; + fireClick(decButton); + + // Counter now at 2, tab is Settings + expect(result.container.querySelector('.value')!.textContent, '2'); + expect( + result.container.textContent, + contains('Configure your application preferences'), + ); + + result.unmount(); + }); + + test('active tab button has active class', () { + final result = render(fc(appComponent)); + + final tabButtons = result.container.querySelectorAll('.tab-btn'); + + // First button (Home) should be active initially + expect(tabButtons[0].className, contains('active')); + expect(tabButtons[1].className, isNot(contains('active'))); + expect(tabButtons[2].className, isNot(contains('active'))); + + // Click Profile + fireClick(tabButtons[1]); + + // Now Profile should be active + final updatedButtons = result.container.querySelectorAll('.tab-btn'); + expect(updatedButtons[0].className, isNot(contains('active'))); + expect(updatedButtons[1].className, contains('active')); + expect(updatedButtons[2].className, isNot(contains('active'))); + + result.unmount(); + }); + + test('Counter buttons have correct class names', () { + final result = render(fc(appComponent)); + + final decButton = result.container.querySelector('.btn-dec'); + final incButton = result.container.querySelector('.btn-inc'); + final resetButton = result.container.querySelector('.btn-reset'); + + expect(decButton, isNotNull); + expect(incButton, isNotNull); + expect(resetButton, isNotNull); + + expect(decButton!.textContent, '-'); + expect(incButton!.textContent, '+'); + expect(resetButton!.textContent, 'Reset'); + + result.unmount(); + }); + + test('App has correct structure with app class', () { + final result = render(fc(appComponent)); + + final appDiv = result.container.querySelector('.app'); + expect(appDiv, isNotNull); + + // App contains both Counter and TabsExample + expect(appDiv!.textContent, contains('Dart + JSX')); + expect(appDiv.textContent, contains('Tabbed Interface')); + + result.unmount(); + }); + + test('rapid Counter clicks work correctly', () { + final result = render(fc(appComponent)); + + final incButton = result.container.querySelector('.btn-inc')!; + + // Rapid clicks + for (var i = 0; i < 10; i++) { + fireClick(incButton); + } + + expect(result.container.querySelector('.value')!.textContent, '10'); + + final decButton = result.container.querySelector('.btn-dec')!; + for (var i = 0; i < 5; i++) { + fireClick(decButton); + } + + expect(result.container.querySelector('.value')!.textContent, '5'); + + result.unmount(); + }); + + test('Counter can go negative', () { + final result = render(fc(appComponent)); + + final decButton = result.container.querySelector('.btn-dec')!; + fireClick(decButton); + fireClick(decButton); + fireClick(decButton); + + expect(result.container.querySelector('.value')!.textContent, '-3'); + + result.unmount(); + }); +} diff --git a/examples/jsx_demo/test/tabs_example_test.dart b/examples/jsx_demo/test/tabs_example_test.dart new file mode 100644 index 0000000..6c4366c --- /dev/null +++ b/examples/jsx_demo/test/tabs_example_test.dart @@ -0,0 +1,127 @@ +/// UI tests for TabsExample component. +@TestOn('browser') +library; + +import 'dart:js_interop'; + +import 'package:dart_node_react/dart_node_react.dart' hide RenderResult, render; +import 'package:dart_node_react/src/testing_library.dart'; +import 'package:jsx_demo/tabs_example.g.dart'; +import 'package:test/test.dart'; + +void main() { + late JSAny tabsComponent; + + setUp(() { + tabsComponent = registerFunctionComponent((props) => TabsExample()); + }); + + test('TabsExample renders with title', () { + final result = render(fc(tabsComponent)); + expect(result.container.textContent, contains('Tabbed Interface')); + result.unmount(); + }); + + test('TabsExample shows home tab content by default', () { + final result = render(fc(tabsComponent)); + final content = result.container.querySelector('.tab-content'); + expect(content, isNotNull); + expect(content!.textContent, contains('Home')); + expect(content.textContent, contains('Welcome to the home tab')); + result.unmount(); + }); + + test('TabsExample switches to profile tab when clicked', () { + final result = render(fc(tabsComponent)); + + final buttons = result.container.querySelectorAll('.tab-btn'); + final profileButton = buttons[1]; + + fireClick(profileButton); + + final content = result.container.querySelector('.tab-content'); + expect(content!.textContent, contains('Profile')); + expect(content.textContent, contains('View and edit your profile settings')); + + result.unmount(); + }); + + test('TabsExample switches to settings tab when clicked', () { + final result = render(fc(tabsComponent)); + + final buttons = result.container.querySelectorAll('.tab-btn'); + final settingsButton = buttons[2]; + + fireClick(settingsButton); + + final content = result.container.querySelector('.tab-content'); + expect(content!.textContent, contains('Settings')); + expect(content.textContent, contains('Configure your application preferences')); + + result.unmount(); + }); + + test('TabsExample can switch between all tabs', () { + final result = render(fc(tabsComponent)); + + final buttons = result.container.querySelectorAll('.tab-btn'); + final homeButton = buttons[0]; + final profileButton = buttons[1]; + final settingsButton = buttons[2]; + + final content = result.container.querySelector('.tab-content')!; + + expect(content.textContent, contains('Welcome to the home tab')); + + fireClick(profileButton); + expect(content.textContent, contains('View and edit your profile')); + + fireClick(settingsButton); + expect(content.textContent, contains('Configure your application')); + + fireClick(homeButton); + expect(content.textContent, contains('Welcome to the home tab')); + + result.unmount(); + }); + + test('TabsExample renders all three tab buttons', () { + final result = render(fc(tabsComponent)); + + final buttons = result.container.querySelectorAll('.tab-btn'); + expect(buttons.length, equals(3)); + + expect(buttons[0].textContent, contains('Home')); + expect(buttons[1].textContent, contains('Profile')); + expect(buttons[2].textContent, contains('Settings')); + + result.unmount(); + }); + + test('active tab has active class', () { + final result = render(fc(tabsComponent)); + + final buttons = result.container.querySelectorAll('.tab-btn'); + expect(buttons[0].className, contains('active')); + expect(buttons[1].className, isNot(contains('active'))); + expect(buttons[2].className, isNot(contains('active'))); + + result.unmount(); + }); + + test('active class changes when tab is clicked', () { + final result = render(fc(tabsComponent)); + + var buttons = result.container.querySelectorAll('.tab-btn'); + final profileButton = buttons[1]; + + fireClick(profileButton); + + buttons = result.container.querySelectorAll('.tab-btn'); + expect(buttons[0].className, isNot(contains('active'))); + expect(buttons[1].className, contains('active')); + expect(buttons[2].className, isNot(contains('active'))); + + result.unmount(); + }); +} diff --git a/examples/jsx_demo/test/test_helpers.dart b/examples/jsx_demo/test/test_helpers.dart new file mode 100644 index 0000000..86ed93c --- /dev/null +++ b/examples/jsx_demo/test/test_helpers.dart @@ -0,0 +1,18 @@ +/// Test helpers for JSX demo tests. +library; + +import 'package:dart_node_react/src/testing_library.dart'; + +/// Wait for text to appear in rendered output +Future waitForText( + TestRenderResult result, + String text, { + int maxAttempts = 20, + Duration interval = const Duration(milliseconds: 100), +}) async { + for (var i = 0; i < maxAttempts; i++) { + if (result.container.textContent.contains(text)) return; + await Future.delayed(interval); + } + throw StateError('Text "$text" not found after $maxAttempts attempts'); +} diff --git a/examples/jsx_demo/test/test_template.html b/examples/jsx_demo/test/test_template.html new file mode 100644 index 0000000..cf3d531 --- /dev/null +++ b/examples/jsx_demo/test/test_template.html @@ -0,0 +1,29 @@ + + + + + {{testName}} + + + + + + {{testScript}} + + + diff --git a/examples/jsx_demo/web/app.dart b/examples/jsx_demo/web/app.dart new file mode 100644 index 0000000..f820e62 --- /dev/null +++ b/examples/jsx_demo/web/app.dart @@ -0,0 +1,31 @@ +/// Main app entry point. +/// +/// This file imports the generated .g.dart files. +/// Run `dart run dart_jsx:jsx --watch .` to auto-generate them. +library; + +import 'dart:js_interop'; + +import 'package:dart_node_react/dart_node_react.dart'; + +// Import the transpiled components +import 'package:jsx_demo/counter.g.dart'; +import 'package:jsx_demo/tabs_example.g.dart'; + +void main() { + final root = createRoot(document.getElementById('root')!); + root.render(App()); +} + +/// The main app component - shows counter and tabs. +ReactElement App() => $div(className: 'app') >> [ + Counter(), + TabsExample(), +]; + +@JS('document') +external JSObject get document; + +extension on JSObject { + external JSObject? getElementById(String id); +} diff --git a/examples/jsx_demo/web/index.html b/examples/jsx_demo/web/index.html new file mode 100644 index 0000000..a5287f0 --- /dev/null +++ b/examples/jsx_demo/web/index.html @@ -0,0 +1,29 @@ + + + + + + JSX Demo - Dart + + + + + +
+ + + diff --git a/examples/too_many_cooks/lib/src/db/db.dart b/examples/too_many_cooks/lib/src/db/db.dart index eb3d083..a7979e0 100644 --- a/examples/too_many_cooks/lib/src/db/db.dart +++ b/examples/too_many_cooks/lib/src/db/db.dart @@ -101,6 +101,10 @@ typedef TooManyCooksDb = ({ Result, DbError> Function() listPlans, Result, DbError> Function() listAllMessages, Result Function() close, + // Admin operations (no auth required - for VSCode extension) + Result Function(String filePath) adminDeleteLock, + Result Function(String agentName) adminDeleteAgent, + Result Function(String agentName) adminResetKey, }); /// Create database instance with retry policy. @@ -199,6 +203,9 @@ TooManyCooksDb _createDbOps( Error(:final error) => Error((code: errDatabase, message: error)), }; }, + adminDeleteLock: (path) => _adminDeleteLock(db, log, path), + adminDeleteAgent: (name) => _adminDeleteAgent(db, log, name), + adminResetKey: (name) => _adminResetKey(db, log, name), ); extension type _Crypto(JSObject _) implements JSObject { @@ -785,3 +792,102 @@ Result, DbError> _listAllMessages(Database db, Logger log) { Error(:final error) => Error((code: errDatabase, message: error)), }; } + +// === Admin Operations (no auth required) === + +Result _adminDeleteLock( + Database db, + Logger log, + String filePath, +) { + log.warn('Admin deleting lock on $filePath'); + final stmtResult = db.prepare('DELETE FROM locks WHERE file_path = ?'); + return switch (stmtResult) { + Success(:final value) => switch (value.run([filePath])) { + Success(:final value) when value.changes == 0 => const Error(( + code: errNotFound, + message: 'Lock not found', + )), + Success() => const Success(null), + Error(:final error) => Error((code: errDatabase, message: error)), + }, + Error(:final error) => Error((code: errDatabase, message: error)), + }; +} + +Result _adminDeleteAgent( + Database db, + Logger log, + String agentName, +) { + log.warn('Admin deleting agent $agentName'); + // Delete agent's locks, messages, plans, then identity + final deleteLocks = db.prepare('DELETE FROM locks WHERE agent_name = ?'); + final deleteMessages = db.prepare( + 'DELETE FROM messages WHERE from_agent = ? OR to_agent = ?', + ); + final deletePlans = db.prepare('DELETE FROM plans WHERE agent_name = ?'); + final deleteIdentity = db.prepare( + 'DELETE FROM identity WHERE agent_name = ?', + ); + + // Check all prepared successfully + for (final stmtResult in [deleteLocks, deleteMessages, deletePlans]) { + if (stmtResult case Error(:final error)) { + return Error((code: errDatabase, message: error)); + } + } + if (deleteIdentity case Error(:final error)) { + return Error((code: errDatabase, message: error)); + } + + // Run the deletes + final locksStmt = (deleteLocks as Success).value; + final msgsStmt = (deleteMessages as Success).value; + final plansStmt = (deletePlans as Success).value; + final idStmt = (deleteIdentity as Success).value; + + if (locksStmt.run([agentName]) case Error(:final error)) { + return Error((code: errDatabase, message: error)); + } + if (msgsStmt.run([agentName, agentName]) case Error(:final error)) { + return Error((code: errDatabase, message: error)); + } + if (plansStmt.run([agentName]) case Error(:final error)) { + return Error((code: errDatabase, message: error)); + } + + return switch (idStmt.run([agentName])) { + Success(:final value) when value.changes == 0 => const Error(( + code: errNotFound, + message: 'Agent not found', + )), + Success() => const Success(null), + Error(:final error) => Error((code: errDatabase, message: error)), + }; +} + +Result _adminResetKey( + Database db, + Logger log, + String agentName, +) { + log.warn('Admin resetting key for agent $agentName'); + final newKey = _generateKey(); + final now = _now(); + final stmtResult = db.prepare(''' + UPDATE identity SET agent_key = ?, last_active = ? + WHERE agent_name = ? + '''); + return switch (stmtResult) { + Success(:final value) => switch (value.run([newKey, now, agentName])) { + Success(:final value) when value.changes == 0 => const Error(( + code: errNotFound, + message: 'Agent not found', + )), + Success() => Success((agentName: agentName, agentKey: newKey)), + Error(:final error) => Error((code: errDatabase, message: error)), + }, + Error(:final error) => Error((code: errDatabase, message: error)), + }; +} diff --git a/examples/too_many_cooks/lib/src/server.dart b/examples/too_many_cooks/lib/src/server.dart index 088de47..2e36e69 100644 --- a/examples/too_many_cooks/lib/src/server.dart +++ b/examples/too_many_cooks/lib/src/server.dart @@ -7,6 +7,7 @@ import 'package:nadz/nadz.dart'; import 'package:too_many_cooks/src/config.dart'; import 'package:too_many_cooks/src/db/db.dart'; import 'package:too_many_cooks/src/notifications.dart'; +import 'package:too_many_cooks/src/tools/admin_tool.dart'; import 'package:too_many_cooks/src/tools/lock_tool.dart'; import 'package:too_many_cooks/src/tools/message_tool.dart'; import 'package:too_many_cooks/src/tools/plan_tool.dart'; @@ -78,6 +79,11 @@ Result createTooManyCooksServer({ 'subscribe', subscribeToolConfig, createSubscribeHandler(emitter), + ) + ..registerTool( + 'admin', + adminToolConfig, + createAdminHandler(db, emitter, log), ); log.info('Server initialized with all tools registered'); diff --git a/examples/too_many_cooks/lib/src/tools/admin_tool.dart b/examples/too_many_cooks/lib/src/tools/admin_tool.dart new file mode 100644 index 0000000..94eb34a --- /dev/null +++ b/examples/too_many_cooks/lib/src/tools/admin_tool.dart @@ -0,0 +1,179 @@ +/// Admin tool - administrative operations for VSCode extension. +library; + +import 'package:dart_logging/dart_logging.dart'; +import 'package:dart_node_mcp/dart_node_mcp.dart'; +import 'package:nadz/nadz.dart'; +import 'package:too_many_cooks/src/db/db.dart'; +import 'package:too_many_cooks/src/notifications.dart'; +import 'package:too_many_cooks/src/types.dart'; + +/// Input schema for admin tool. +const adminInputSchema = { + 'type': 'object', + 'properties': { + 'action': { + 'type': 'string', + 'enum': ['delete_lock', 'delete_agent', 'reset_key'], + 'description': 'Admin action to perform', + }, + 'file_path': { + 'type': 'string', + 'description': 'File path (for delete_lock)', + }, + 'agent_name': { + 'type': 'string', + 'description': 'Agent name (for delete_agent)', + }, + }, + 'required': ['action'], +}; + +/// Tool config for admin. +const adminToolConfig = ( + title: 'Admin Operations', + description: + 'Admin operations for VSCode extension. REQUIRED: action. ' + 'For delete_lock: file_path. For delete_agent: agent_name. ' + 'For reset_key: agent_name (returns new key for existing agent). ' + 'Example: {"action":"delete_lock","file_path":"/path/file.dart"}', + inputSchema: adminInputSchema, + outputSchema: null, + annotations: null, +); + +/// Create admin tool handler. +ToolCallback createAdminHandler( + TooManyCooksDb db, + NotificationEmitter emitter, + Logger logger, +) => (args, meta) async { + final actionArg = args['action']; + if (actionArg == null || actionArg is! String) { + return ( + content: [ + textContent('{"error":"missing_parameter: action is required"}'), + ], + isError: true, + ); + } + final action = actionArg; + final filePath = args['file_path'] as String?; + final agentName = args['agent_name'] as String?; + final log = logger.child({'tool': 'admin', 'action': action}); + + return switch (action) { + 'delete_lock' => _deleteLock(db, emitter, log, filePath), + 'delete_agent' => _deleteAgent(db, emitter, log, agentName), + 'reset_key' => _resetKey(db, log, agentName), + _ => ( + content: [textContent('{"error":"Unknown action: $action"}')], + isError: true, + ), + }; +}; + +CallToolResult _deleteLock( + TooManyCooksDb db, + NotificationEmitter emitter, + Logger log, + String? filePath, +) { + if (filePath == null) { + return ( + content: [ + textContent('{"error":"delete_lock requires file_path"}'), + ], + isError: true, + ); + } + + return switch (db.adminDeleteLock(filePath)) { + Success() => () { + emitter.emit(eventLockReleased, { + 'file_path': filePath, + 'agent_name': 'admin', + 'admin': true, + }); + log.warn('Admin deleted lock on $filePath'); + return ( + content: [textContent('{"deleted":true}')], + isError: false, + ); + }(), + Error(:final error) => ( + content: [ + textContent('{"error":"${error.code}: ${error.message}"}'), + ], + isError: true, + ), + }; +} + +CallToolResult _deleteAgent( + TooManyCooksDb db, + NotificationEmitter emitter, + Logger log, + String? agentName, +) { + if (agentName == null) { + return ( + content: [ + textContent('{"error":"delete_agent requires agent_name"}'), + ], + isError: true, + ); + } + + return switch (db.adminDeleteAgent(agentName)) { + Success() => () { + log.warn('Admin deleted agent $agentName'); + return ( + content: [textContent('{"deleted":true}')], + isError: false, + ); + }(), + Error(:final error) => ( + content: [ + textContent('{"error":"${error.code}: ${error.message}"}'), + ], + isError: true, + ), + }; +} + +CallToolResult _resetKey( + TooManyCooksDb db, + Logger log, + String? agentName, +) { + if (agentName == null) { + return ( + content: [ + textContent('{"error":"reset_key requires agent_name"}'), + ], + isError: true, + ); + } + + return switch (db.adminResetKey(agentName)) { + Success(:final value) => () { + log.warn('Admin reset key for agent $agentName'); + return ( + content: [ + textContent( + '{"agent_name":"${value.agentName}",' + '"agent_key":"${value.agentKey}"}', + ), + ], + isError: false, + ); + }(), + Error(:final error) => ( + content: [ + textContent('{"error":"${error.code}: ${error.message}"}'), + ], + isError: true, + ), + }; +} diff --git a/examples/too_many_cooks_vscode_extension/package.json b/examples/too_many_cooks_vscode_extension/package.json index ae15fba..8961362 100644 --- a/examples/too_many_cooks_vscode_extension/package.json +++ b/examples/too_many_cooks_vscode_extension/package.json @@ -54,6 +54,24 @@ "command": "tooManyCooks.showDashboard", "title": "Show Dashboard", "category": "Too Many Cooks" + }, + { + "command": "tooManyCooks.deleteLock", + "title": "Force Release Lock", + "category": "Too Many Cooks", + "icon": "$(trash)" + }, + { + "command": "tooManyCooks.deleteAgent", + "title": "Remove Agent", + "category": "Too Many Cooks", + "icon": "$(trash)" + }, + { + "command": "tooManyCooks.sendMessage", + "title": "Send Message", + "category": "Too Many Cooks", + "icon": "$(mail)" } ], "viewsContainers": { @@ -78,10 +96,6 @@ { "id": "tooManyCooksMessages", "name": "Messages" - }, - { - "id": "tooManyCooksPlans", - "name": "Plans" } ] }, @@ -91,6 +105,33 @@ "command": "tooManyCooks.refresh", "when": "view =~ /tooManyCooks.*/", "group": "navigation" + }, + { + "command": "tooManyCooks.sendMessage", + "when": "view == tooManyCooksMessages", + "group": "navigation" + } + ], + "view/item/context": [ + { + "command": "tooManyCooks.deleteLock", + "when": "view == tooManyCooksLocks && viewItem == lock", + "group": "inline" + }, + { + "command": "tooManyCooks.deleteLock", + "when": "view == tooManyCooksAgents && viewItem == lock", + "group": "inline" + }, + { + "command": "tooManyCooks.deleteAgent", + "when": "view == tooManyCooksAgents && viewItem == deletableAgent", + "group": "inline" + }, + { + "command": "tooManyCooks.sendMessage", + "when": "view == tooManyCooksAgents && viewItem == deletableAgent", + "group": "inline" } ] }, diff --git a/examples/too_many_cooks_vscode_extension/src/extension.ts b/examples/too_many_cooks_vscode_extension/src/extension.ts index 0b4e8de..5c71d8e 100644 --- a/examples/too_many_cooks_vscode_extension/src/extension.ts +++ b/examples/too_many_cooks_vscode_extension/src/extension.ts @@ -6,10 +6,9 @@ import * as vscode from 'vscode'; import { Store } from './state/store'; -import { AgentsTreeProvider } from './ui/tree/agentsTreeProvider'; -import { LocksTreeProvider } from './ui/tree/locksTreeProvider'; +import { AgentsTreeProvider, AgentTreeItem } from './ui/tree/agentsTreeProvider'; +import { LocksTreeProvider, LockTreeItem } from './ui/tree/locksTreeProvider'; import { MessagesTreeProvider } from './ui/tree/messagesTreeProvider'; -import { PlansTreeProvider } from './ui/tree/plansTreeProvider'; import { LockDecorationProvider } from './ui/decorations/lockDecorations'; import { StatusBarManager } from './ui/statusBar/statusBarItem'; import { DashboardPanel } from './ui/webview/dashboardPanel'; @@ -22,7 +21,6 @@ let statusBar: StatusBarManager | undefined; let agentsProvider: AgentsTreeProvider | undefined; let locksProvider: LocksTreeProvider | undefined; let messagesProvider: MessagesTreeProvider | undefined; -let plansProvider: PlansTreeProvider | undefined; let lockDecorations: LockDecorationProvider | undefined; let outputChannel: vscode.OutputChannel | undefined; @@ -86,7 +84,6 @@ export async function activate( agentsProvider = new AgentsTreeProvider(); locksProvider = new LocksTreeProvider(); messagesProvider = new MessagesTreeProvider(); - plansProvider = new PlansTreeProvider(); // Register tree views const agentsView = vscode.window.createTreeView('tooManyCooksAgents', { @@ -102,11 +99,6 @@ export async function activate( treeDataProvider: messagesProvider, }); - const plansView = vscode.window.createTreeView('tooManyCooksPlans', { - treeDataProvider: plansProvider, - showCollapseAll: true, - }); - // Create file decoration provider lockDecorations = new LockDecorationProvider(); const decorationDisposable = vscode.window.registerFileDecorationProvider( @@ -165,6 +157,117 @@ export async function activate( } ); + // Delete lock command - force release a lock + const deleteLockCmd = vscode.commands.registerCommand( + 'tooManyCooks.deleteLock', + async (item: LockTreeItem | AgentTreeItem) => { + const filePath = item instanceof LockTreeItem + ? item.lock?.filePath + : item.filePath; + if (!filePath) { + vscode.window.showErrorMessage('No lock selected'); + return; + } + const confirm = await vscode.window.showWarningMessage( + `Force release lock on ${filePath}?`, + { modal: true }, + 'Release' + ); + if (confirm !== 'Release') return; + try { + await store?.forceReleaseLock(filePath); + log(`Force released lock: ${filePath}`); + vscode.window.showInformationMessage(`Lock released: ${filePath}`); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + log(`Failed to release lock: ${msg}`); + vscode.window.showErrorMessage(`Failed to release lock: ${msg}`); + } + } + ); + + // Delete agent command - remove an agent from the system + const deleteAgentCmd = vscode.commands.registerCommand( + 'tooManyCooks.deleteAgent', + async (item: AgentTreeItem) => { + const agentName = item.agentName; + if (!agentName) { + vscode.window.showErrorMessage('No agent selected'); + return; + } + const confirm = await vscode.window.showWarningMessage( + `Remove agent "${agentName}"? This will release all their locks.`, + { modal: true }, + 'Remove' + ); + if (confirm !== 'Remove') return; + try { + await store?.deleteAgent(agentName); + log(`Removed agent: ${agentName}`); + vscode.window.showInformationMessage(`Agent removed: ${agentName}`); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + log(`Failed to remove agent: ${msg}`); + vscode.window.showErrorMessage(`Failed to remove agent: ${msg}`); + } + } + ); + + // Send message command + const sendMessageCmd = vscode.commands.registerCommand( + 'tooManyCooks.sendMessage', + async (item?: AgentTreeItem) => { + // Get target agent (if clicked from agent context menu) + let toAgent = item?.agentName; + + // If no target, show quick pick to select one + if (!toAgent) { + const response = await store?.callTool('status', {}); + if (!response) { + vscode.window.showErrorMessage('Not connected to server'); + return; + } + const status = JSON.parse(response); + const agentNames = status.agents.map( + (a: { agent_name: string }) => a.agent_name + ); + agentNames.unshift('* (broadcast to all)'); + toAgent = await vscode.window.showQuickPick(agentNames, { + placeHolder: 'Select recipient agent', + }); + if (!toAgent) return; + if (toAgent === '* (broadcast to all)') toAgent = '*'; + } + + // Get sender name + const fromAgent = await vscode.window.showInputBox({ + prompt: 'Your agent name (sender)', + placeHolder: 'e.g., vscode-user', + value: 'vscode-user', + }); + if (!fromAgent) return; + + // Get message content + const content = await vscode.window.showInputBox({ + prompt: `Message to ${toAgent}`, + placeHolder: 'Enter your message...', + }); + if (!content) return; + + try { + await store?.sendMessage(fromAgent, toAgent, content); + vscode.window.showInformationMessage( + `Message sent to ${toAgent}: "${content.substring(0, 50)}${content.length > 50 ? '...' : ''}"` + ); + log(`Message sent from ${fromAgent} to ${toAgent}: ${content}`); + } catch (err) { + const msg = err instanceof Error ? err.message : String(err); + log(`Failed to send message: ${msg}`); + vscode.window.showErrorMessage(`Failed to send message: ${msg}`); + } + } + ); + // Auto-connect on startup if configured (default: true) const autoConnect = config.get('autoConnect', true); log(`Auto-connect: ${autoConnect}`); @@ -196,12 +299,14 @@ export async function activate( agentsView, locksView, messagesView, - plansView, decorationDisposable, connectCmd, disconnectCmd, refreshCmd, dashboardCmd, + deleteLockCmd, + deleteAgentCmd, + sendMessageCmd, configListener, { dispose: () => { @@ -210,7 +315,6 @@ export async function activate( agentsProvider?.dispose(); locksProvider?.dispose(); messagesProvider?.dispose(); - plansProvider?.dispose(); lockDecorations?.dispose(); }, } @@ -221,7 +325,7 @@ export async function activate( agents: agentsProvider, locks: locksProvider, messages: messagesProvider, - plans: plansProvider, + plans: undefined, }); } diff --git a/examples/too_many_cooks_vscode_extension/src/state/store.ts b/examples/too_many_cooks_vscode_extension/src/state/store.ts index 76f8deb..cd0c51d 100644 --- a/examples/too_many_cooks_vscode_extension/src/state/store.ts +++ b/examples/too_many_cooks_vscode_extension/src/state/store.ts @@ -268,4 +268,74 @@ export class Store { } return this.client.callTool(name, args); } + + /** + * Force release a lock (admin operation). + * Uses admin tool which can delete any lock regardless of expiry. + */ + async forceReleaseLock(filePath: string): Promise { + const result = await this.callTool('admin', { + action: 'delete_lock', + file_path: filePath, + }); + const parsed = JSON.parse(result); + if (parsed.error) { + throw new Error(parsed.error); + } + // Remove from local state + locks.value = locks.value.filter((l) => l.filePath !== filePath); + log(`Force released lock: ${filePath}`); + } + + /** + * Delete an agent (admin operation). + * Requires admin_delete_agent tool on the MCP server. + */ + async deleteAgent(agentName: string): Promise { + const result = await this.callTool('admin', { + action: 'delete_agent', + agent_name: agentName, + }); + const parsed = JSON.parse(result); + if (parsed.error) { + throw new Error(parsed.error); + } + // Remove from local state + agents.value = agents.value.filter((a) => a.agentName !== agentName); + plans.value = plans.value.filter((p) => p.agentName !== agentName); + locks.value = locks.value.filter((l) => l.agentName !== agentName); + log(`Deleted agent: ${agentName}`); + } + + /** + * Send a message from VSCode user to an agent. + * Registers the sender if needed, then sends the message. + */ + async sendMessage( + fromAgent: string, + toAgent: string, + content: string + ): Promise { + // Register sender and get key + const registerResult = await this.callTool('register', { name: fromAgent }); + const registerParsed = JSON.parse(registerResult); + if (registerParsed.error) { + throw new Error(registerParsed.error); + } + const agentKey = registerParsed.agent_key; + + // Send the message + const sendResult = await this.callTool('message', { + action: 'send', + agent_name: fromAgent, + agent_key: agentKey, + to_agent: toAgent, + content: content, + }); + const sendParsed = JSON.parse(sendResult); + if (sendParsed.error) { + throw new Error(sendParsed.error); + } + log(`Message sent from ${fromAgent} to ${toAgent}`); + } } diff --git a/examples/too_many_cooks_vscode_extension/src/test-api.ts b/examples/too_many_cooks_vscode_extension/src/test-api.ts index 829371c..67db902 100644 --- a/examples/too_many_cooks_vscode_extension/src/test-api.ts +++ b/examples/too_many_cooks_vscode_extension/src/test-api.ts @@ -84,7 +84,7 @@ export interface TreeProviders { agents: AgentsTreeProvider; locks: LocksTreeProvider; messages: MessagesTreeProvider; - plans: PlansTreeProvider; + plans?: PlansTreeProvider; } // Global log storage for testing @@ -141,9 +141,11 @@ function buildMessagesSnapshot(providers: TreeProviders): TreeItemSnapshot[] { /** Build plans tree snapshot */ function buildPlansSnapshot(providers: TreeProviders): TreeItemSnapshot[] { - const items = providers.plans.getChildren() ?? []; + const plansProvider = providers.plans; + if (!plansProvider) return []; + const items = plansProvider.getChildren() ?? []; return items.map(item => toSnapshot(item, () => { - const children = providers.plans.getChildren(item) ?? []; + const children = plansProvider.getChildren(item) ?? []; return children.map(child => toSnapshot(child)); })); } @@ -202,6 +204,7 @@ export function createTestAPI(store: Store, providers: TreeProviders): TestAPI { }, getPlanTreeItemCount: () => { // Count only items with actual plans (not "No plans" placeholder) + if (!providers.plans) return 0; const items = providers.plans.getChildren() ?? []; return items.filter((item) => item.plan !== undefined).length; }, diff --git a/examples/too_many_cooks_vscode_extension/src/ui/decorations/lockDecorations.ts b/examples/too_many_cooks_vscode_extension/src/ui/decorations/lockDecorations.ts index ff43082..34b09fd 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/decorations/lockDecorations.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/decorations/lockDecorations.ts @@ -5,6 +5,7 @@ import * as vscode from 'vscode'; import { effect } from '@preact/signals-core'; import { locksByFile } from '../../state/signals'; +import type { FileLock } from '../../mcp/types'; export class LockDecorationProvider implements vscode.FileDecorationProvider { private _onDidChangeFileDecorations = new vscode.EventEmitter< @@ -25,6 +26,28 @@ export class LockDecorationProvider implements vscode.FileDecorationProvider { this._onDidChangeFileDecorations.dispose(); } + private createLockTooltip(lock: FileLock, expired: boolean): string { + const lines: string[] = []; + + if (expired) { + lines.push(`⚠️ EXPIRED LOCK`); + lines.push(`Was held by: ${lock.agentName}`); + } else { + lines.push(`🔒 Locked by ${lock.agentName}`); + const expiresIn = Math.round((lock.expiresAt - Date.now()) / 1000); + lines.push(`Expires in: ${expiresIn}s`); + } + + if (lock.reason) { + lines.push(`Reason: ${lock.reason}`); + } + + const acquiredDate = new Date(lock.acquiredAt); + lines.push(`Acquired: ${acquiredDate.toLocaleString()}`); + + return lines.join('\n'); + } + provideFileDecoration( uri: vscode.Uri ): vscode.FileDecoration | undefined { @@ -42,16 +65,18 @@ export class LockDecorationProvider implements vscode.FileDecorationProvider { if (isExpired) { return { - badge: '!', + badge: '⚠️', color: new vscode.ThemeColor('charts.red'), - tooltip: `Expired lock (was held by ${lock.agentName})`, + tooltip: this.createLockTooltip(lock, true), }; } + // Show agent name initials (up to 2 chars) as badge + const badge = lock.agentName.substring(0, 2).toUpperCase(); return { - badge: 'L', + badge, color: new vscode.ThemeColor('charts.yellow'), - tooltip: `Locked by ${lock.agentName}${lock.reason ? `: ${lock.reason}` : ''}`, + tooltip: this.createLockTooltip(lock, false), }; } } diff --git a/examples/too_many_cooks_vscode_extension/src/ui/tree/agentsTreeProvider.ts b/examples/too_many_cooks_vscode_extension/src/ui/tree/agentsTreeProvider.ts index 3252986..d50e5ab 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/tree/agentsTreeProvider.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/tree/agentsTreeProvider.ts @@ -21,7 +21,8 @@ export class AgentTreeItem extends vscode.TreeItem { super(label, collapsibleState); this.description = description; this.iconPath = this.getIcon(); - this.contextValue = itemType; + // Use specific contextValue for context menu targeting + this.contextValue = itemType === 'agent' ? 'deletableAgent' : itemType; if (tooltip) { this.tooltip = tooltip; } diff --git a/examples/too_many_cooks_vscode_extension/src/ui/tree/locksTreeProvider.ts b/examples/too_many_cooks_vscode_extension/src/ui/tree/locksTreeProvider.ts index f995624..c209c5e 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/tree/locksTreeProvider.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/tree/locksTreeProvider.ts @@ -18,6 +18,7 @@ export class LockTreeItem extends vscode.TreeItem { super(label, collapsibleState); this.description = description; this.iconPath = this.getIcon(); + this.contextValue = lock ? 'lock' : (isCategory ? 'category' : undefined); if (lock) { this.tooltip = this.createTooltip(lock); diff --git a/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts b/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts index 8ae3218..7f882ee 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts @@ -12,13 +12,15 @@ export class MessageTreeItem extends vscode.TreeItem { label: string, description: string | undefined, collapsibleState: vscode.TreeItemCollapsibleState, - public readonly message?: Message + public readonly message?: Message, + public readonly isDetail?: boolean ) { super(label, collapsibleState); this.description = description; this.iconPath = this.getIcon(); + this.contextValue = message ? 'message' : undefined; - if (message) { + if (message && !isDetail) { this.tooltip = this.createTooltip(message); } } @@ -110,8 +112,9 @@ export class MessagesTreeProvider } getChildren(element?: MessageTreeItem): MessageTreeItem[] { - if (element) { - return []; + // If expanding a message, show its details + if (element?.message) { + return this.createMessageDetails(element.message); } const allMessages = messages.value; @@ -134,17 +137,95 @@ export class MessagesTreeProvider return sorted.map((msg) => { const isBroadcast = msg.toAgent === '*'; const target = isBroadcast ? 'all' : msg.toAgent; + const relativeTime = this.getRelativeTime(msg.createdAt); const preview = - msg.content.length > 30 - ? msg.content.substring(0, 30) + '...' + msg.content.length > 25 + ? msg.content.substring(0, 25) + '...' : msg.content; return new MessageTreeItem( `${msg.fromAgent} → ${target}`, - preview, - vscode.TreeItemCollapsibleState.None, + `${relativeTime} | ${preview}`, + vscode.TreeItemCollapsibleState.Collapsed, msg ); }); } + + private createMessageDetails(msg: Message): MessageTreeItem[] { + const details: MessageTreeItem[] = []; + const sentDate = new Date(msg.createdAt); + + // Full content (may span multiple lines) + details.push( + new MessageTreeItem( + '📝 Content', + msg.content, + vscode.TreeItemCollapsibleState.None, + msg, + true + ) + ); + + // Timestamps + details.push( + new MessageTreeItem( + '📅 Sent', + sentDate.toLocaleString(), + vscode.TreeItemCollapsibleState.None, + msg, + true + ) + ); + + if (msg.readAt) { + const readDate = new Date(msg.readAt); + details.push( + new MessageTreeItem( + '✅ Read', + readDate.toLocaleString(), + vscode.TreeItemCollapsibleState.None, + msg, + true + ) + ); + } else { + details.push( + new MessageTreeItem( + '⏳ Status', + 'Unread', + vscode.TreeItemCollapsibleState.None, + msg, + true + ) + ); + } + + // Message ID + details.push( + new MessageTreeItem( + '🔑 ID', + msg.id, + vscode.TreeItemCollapsibleState.None, + msg, + true + ) + ); + + return details; + } + + private getRelativeTime(timestamp: number): string { + const now = Date.now(); + const diff = now - timestamp; + const seconds = Math.floor(diff / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + if (days > 0) return `${days}d`; + if (hours > 0) return `${hours}h`; + if (minutes > 0) return `${minutes}m`; + return 'now'; + } } diff --git a/examples/too_many_cooks_vscode_extension/src/ui/tree/plansTreeProvider.ts b/examples/too_many_cooks_vscode_extension/src/ui/tree/plansTreeProvider.ts index eb47d6e..5226ade 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/tree/plansTreeProvider.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/tree/plansTreeProvider.ts @@ -97,16 +97,31 @@ export class PlansTreeProvider return sorted.map((plan) => { const preview = - plan.currentTask.length > 30 - ? plan.currentTask.substring(0, 30) + '...' + plan.currentTask.length > 25 + ? plan.currentTask.substring(0, 25) + '...' : plan.currentTask; + const relativeTime = this.getRelativeTime(plan.updatedAt); return new PlanTreeItem( plan.agentName, - preview, + `${relativeTime} | ${preview}`, vscode.TreeItemCollapsibleState.Collapsed, plan ); }); } + + private getRelativeTime(timestamp: number): string { + const now = Date.now(); + const diff = now - timestamp; + const seconds = Math.floor(diff / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + if (days > 0) return `${days}d`; + if (hours > 0) return `${hours}h`; + if (minutes > 0) return `${minutes}m`; + return 'now'; + } } diff --git a/packages/dart_jsx/bin/jsx.dart b/packages/dart_jsx/bin/jsx.dart new file mode 100644 index 0000000..de9277a --- /dev/null +++ b/packages/dart_jsx/bin/jsx.dart @@ -0,0 +1,143 @@ +/// JSX transpiler CLI. +/// +/// Usage: +/// dart run dart_jsx:jsx [output.dart] +/// dart run dart_jsx:jsx --watch +/// +/// If output is not specified, writes to stdout. +/// Use --watch to watch a directory for changes. +import 'dart:io'; + +import 'package:dart_jsx/dart_jsx.dart'; +import 'package:nadz/nadz.dart'; + +void main(List args) { + final hasArgs = args.isNotEmpty; + if (!hasArgs) { + _printUsage(); + exit(1); + } + + final isWatch = args.first == '--watch'; + isWatch ? _watchMode(args.sublist(1)) : _transpileMode(args); +} + +void _printUsage() { + stderr.writeln('JSX Transpiler for Dart'); + stderr.writeln(''); + stderr.writeln('Usage:'); + stderr.writeln(' dart run dart_jsx:jsx [output.dart]'); + stderr.writeln(' dart run dart_jsx:jsx --watch '); + stderr.writeln(''); + stderr.writeln('Options:'); + stderr.writeln(' --watch Watch directory for .jsx files'); + stderr.writeln(''); + stderr.writeln('Examples:'); + stderr.writeln(' dart run dart_jsx:jsx app.jsx app.dart'); + stderr.writeln(' dart run dart_jsx:jsx --watch lib/'); +} + +void _transpileMode(List args) { + final inputPath = args.first; + final outputPath = args.length > 1 ? args[1] : null; + + final inputFile = File(inputPath); + final exists = inputFile.existsSync(); + if (!exists) { + stderr.writeln('Error: File not found: $inputPath'); + exit(1); + } + + final source = inputFile.readAsStringSync(); + final result = transpileJsx(source); + + result.match( + onSuccess: (output) { + final hasOutput = outputPath != null; + if (hasOutput) { + final header = '// GENERATED CODE - DO NOT MODIFY BY HAND\n' + '// Generated from: ${inputPath.split('/').last}\n\n'; + File(outputPath).writeAsStringSync(header + output); + } else { + stdout.write(output); + } + }, + onError: (error) { + stderr.writeln('Error: $error'); + exit(1); + }, + ); +} + +void _watchMode(List args) { + final hasDir = args.isNotEmpty; + if (!hasDir) { + stderr.writeln('Error: --watch requires a directory'); + exit(1); + } + + final dirPath = args.first; + final dir = Directory(dirPath); + final exists = dir.existsSync(); + if (!exists) { + stderr.writeln('Error: Directory not found: $dirPath'); + exit(1); + } + + stdout.writeln('Watching $dirPath for .jsx files...'); + + // Initial transpile of all .jsx files + _transpileDirectory(dir); + + // Watch for changes + dir.watch(recursive: true).listen((event) { + final isJsxFile = event.path.endsWith('.jsx') && !event.path.endsWith('.g.dart'); + if (!isJsxFile) return; + + final isModifyOrCreate = + event.type == FileSystemEvent.modify || + event.type == FileSystemEvent.create; + + if (isModifyOrCreate) { + stdout.writeln('Transpiling: ${event.path}'); + _transpileFile(event.path); + } + }); +} + +void _transpileDirectory(Directory dir) { + final files = dir + .listSync(recursive: true) + .whereType() + .where((f) => f.path.endsWith('.jsx')); + + for (final file in files) { + stdout.writeln('Transpiling: ${file.path}'); + _transpileFile(file.path); + } +} + +void _transpileFile(String inputPath) { + final inputFile = File(inputPath); + final exists = inputFile.existsSync(); + if (!exists) return; + + // .jsx -> .g.dart + final outputPath = inputPath.replaceAll('.jsx', '.g.dart'); + + final source = inputFile.readAsStringSync(); + final result = transpileJsx(source); + + result.match( + onSuccess: (output) { + // Add generated file header + final header = '// GENERATED CODE - DO NOT MODIFY BY HAND\n' + '// Generated from: ${inputPath.split('/').last}\n\n'; + File(outputPath).writeAsStringSync(header + output); + stdout.writeln(' -> $outputPath'); + }, + onError: (error) { + stderr.writeln('Error in $inputPath: $error'); + }, + ); +} diff --git a/packages/dart_jsx/lib/dart_jsx.dart b/packages/dart_jsx/lib/dart_jsx.dart new file mode 100644 index 0000000..60094a9 --- /dev/null +++ b/packages/dart_jsx/lib/dart_jsx.dart @@ -0,0 +1,27 @@ +/// JSX transpiler for Dart. +/// +/// Transforms JSX syntax in Dart files to dart_node_react element calls. +/// +/// ## Usage +/// +/// In your Dart file, use JSX inside `jsx()` calls: +/// ```dart +/// final element = jsx(
+///

Hello World

+/// +///
); +/// ``` +/// +/// The transpiler converts this to: +/// ```dart +/// final element = $div(className: 'app') >> [ +/// $h1 >> 'Hello World', +/// $button(onClick: handleClick) >> 'Click me', +/// ]; +/// ``` +library; + +export 'src/parser.dart'; +export 'src/result_aliases.dart'; +export 'src/transformer.dart'; +export 'src/transpiler.dart'; diff --git a/packages/dart_jsx/lib/src/parser.dart b/packages/dart_jsx/lib/src/parser.dart new file mode 100644 index 0000000..252c7ae --- /dev/null +++ b/packages/dart_jsx/lib/src/parser.dart @@ -0,0 +1,462 @@ +/// JSX parser - converts JSX syntax to an AST. +library; + +import 'package:nadz/nadz.dart'; + +/// Represents a JSX node in the AST. +sealed class JsxNode {} + +/// A JSX element like `
...
`. +final class JsxElement extends JsxNode { + JsxElement({ + required this.tagName, + required this.attributes, + required this.children, + required this.isSelfClosing, + }); + + final String tagName; + final List attributes; + final List children; + final bool isSelfClosing; + + @override + String toString() => + 'JsxElement($tagName, attrs: $attributes, children: $children)'; +} + +/// A JSX attribute like `className="app"` or `onClick={handler}`. +sealed class JsxAttribute { + String get name; +} + +/// String attribute: `className="app"`. +final class JsxStringAttribute extends JsxAttribute { + JsxStringAttribute(this.name, this.value); + + @override + final String name; + final String value; + + @override + String toString() => 'JsxStringAttribute($name="$value")'; +} + +/// Expression attribute: `onClick={handler}` or `disabled={true}`. +final class JsxExpressionAttribute extends JsxAttribute { + JsxExpressionAttribute(this.name, this.expression); + + @override + final String name; + final String expression; + + @override + String toString() => 'JsxExpressionAttribute($name={$expression})'; +} + +/// Boolean attribute: `disabled` (no value, implies true). +final class JsxBooleanAttribute extends JsxAttribute { + JsxBooleanAttribute(this.name); + + @override + final String name; + + @override + String toString() => 'JsxBooleanAttribute($name)'; +} + +/// Spread attribute: `{...props}`. +final class JsxSpreadAttribute extends JsxAttribute { + JsxSpreadAttribute(this.expression); + + final String expression; + + @override + String get name => '...'; + + @override + String toString() => 'JsxSpreadAttribute({...$expression})'; +} + +/// Text content inside an element. +final class JsxText extends JsxNode { + JsxText(this.text); + + final String text; + + @override + String toString() => 'JsxText("$text")'; +} + +/// Expression inside an element: `{variable}` or `{condition ? a : b}`. +final class JsxExpression extends JsxNode { + JsxExpression(this.expression); + + final String expression; + + @override + String toString() => 'JsxExpression({$expression})'; +} + +/// A JSX fragment: `<>...` or `...`. +final class JsxFragment extends JsxNode { + JsxFragment(this.children); + + final List children; + + @override + String toString() => 'JsxFragment($children)'; +} + +/// Parser for JSX syntax. +class JsxParser { + JsxParser(this._source); + + final String _source; + int _pos = 0; + + String get _remaining => _source.substring(_pos); + bool get _isEof => _pos >= _source.length; + String get _currentChar => _isEof ? '' : _source[_pos]; + + /// Parses JSX source and returns the root node. + Result parse() { + _skipWhitespace(); + return _isEof ? Error('Empty JSX input') : _parseNode(); + } + + Result _parseNode() { + _skipWhitespace(); + return _currentChar == '<' ? _parseElement() : _parseTextOrExpression(); + } + + Result _parseElement() { + // Consume '<' + _pos++; + _skipWhitespace(); + + // Check for fragment <> + return _currentChar == '>' ? _parseFragment() : _parseNamedElement(); + } + + Result _parseFragment() { + // Consume '>' + _pos++; + + final childrenResult = _parseChildren(''); + return childrenResult.match( + onSuccess: (children) { + // Consume '' + _expect(''); + return Success(JsxFragment(children)); + }, + onError: Error.new, + ); + } + + Result _parseNamedElement() { + // Parse tag name + final tagName = _parseIdentifier(); + return tagName.isEmpty + ? Error('Expected tag name at position $_pos') + : _parseElementWithTag(tagName); + } + + Result _parseElementWithTag(String tagName) { + _skipWhitespace(); + + // Parse attributes + final attrsResult = _parseAttributes(); + return attrsResult.match( + onSuccess: (attrs) => _parseElementBody(tagName, attrs), + onError: Error.new, + ); + } + + Result _parseElementBody( + String tagName, + List attrs, + ) { + _skipWhitespace(); + + // Self-closing tag? + return _remaining.startsWith('/>') + ? _parseSelfClosingEnd(tagName, attrs) + : _parseElementWithChildren(tagName, attrs); + } + + Result _parseSelfClosingEnd( + String tagName, + List attrs, + ) { + _pos += 2; // consume '/>' + return Success(JsxElement( + tagName: tagName, + attributes: attrs, + children: [], + isSelfClosing: true, + )); + } + + Result _parseElementWithChildren( + String tagName, + List attrs, + ) { + // Consume '>' + return _currentChar != '>' + ? Error('Expected ">" at position $_pos') + : _parseChildrenAndClose(tagName, attrs); + } + + Result _parseChildrenAndClose( + String tagName, + List attrs, + ) { + _pos++; // consume '>' + + final closingTag = ''; + final childrenResult = _parseChildren(closingTag); + return childrenResult.match( + onSuccess: (children) => _finishElement(tagName, attrs, children, closingTag), + onError: Error.new, + ); + } + + Result _finishElement( + String tagName, + List attrs, + List children, + String closingTag, + ) { + // Consume closing tag + if (!_remaining.startsWith(closingTag)) { + return Error('Expected closing tag $closingTag at position $_pos'); + } + _pos += closingTag.length; + return Success(JsxElement( + tagName: tagName, + attributes: attrs, + children: children, + isSelfClosing: false, + )); + } + + Result, String> _parseAttributes() { + final attrs = []; + while (!_isEof && _currentChar != '>' && !_remaining.startsWith('/>')) { + _skipWhitespace(); + final result = _shouldParseAttribute() + ? _parseAttribute() + : Success(null); + + final shouldContinue = result.match( + onSuccess: (attr) { + if (attr != null) attrs.add(attr); + return true; + }, + onError: (_) => false, + ); + if (!shouldContinue) { + return result.match(onSuccess: (_) => Success(attrs), onError: Error.new); + } + } + return Success(attrs); + } + + bool _shouldParseAttribute() => + !_isEof && _currentChar != '>' && !_remaining.startsWith('/>'); + + Result _parseAttribute() { + _skipWhitespace(); + + // Spread attribute? + return _remaining.startsWith('{...') + ? _parseSpreadAttribute() + : _parseNamedAttribute(); + } + + Result _parseSpreadAttribute() { + _pos += 4; // consume '{...' + final expr = _parseBalancedExpression('}'); + _pos++; // consume '}' + return Success(JsxSpreadAttribute(expr)); + } + + Result _parseNamedAttribute() { + final name = _parseIdentifier(); + return name.isEmpty ? Success(null) : _parseAttributeValue(name); + } + + Result _parseAttributeValue(String name) { + _skipWhitespace(); + + // Boolean attribute (no value)? + return _currentChar != '=' + ? Success(JsxBooleanAttribute(name)) + : _parseAttributeWithValue(name); + } + + Result _parseAttributeWithValue(String name) { + _pos++; // consume '=' + _skipWhitespace(); + + return _currentChar == '"' || _currentChar == "'" + ? _parseStringAttribute(name) + : _currentChar == '{' + ? _parseExpressionAttribute(name) + : Error('Expected string or expression for attribute $name'); + } + + Result _parseStringAttribute(String name) { + final quote = _currentChar; + _pos++; // consume opening quote + + final start = _pos; + while (!_isEof && _currentChar != quote) { + _pos++; + } + final value = _source.substring(start, _pos); + _pos++; // consume closing quote + + return Success(JsxStringAttribute(name, value)); + } + + Result _parseExpressionAttribute(String name) { + _pos++; // consume '{' + final expr = _parseBalancedExpression('}'); + _pos++; // consume '}' + return Success(JsxExpressionAttribute(name, expr)); + } + + Result, String> _parseChildren(String closingTag) { + final children = []; + + while (!_isEof && !_remaining.startsWith(closingTag)) { + final result = _parseChild(); + final shouldContinue = result.match( + onSuccess: (child) { + if (child != null) children.add(child); + return true; + }, + onError: (_) => false, + ); + if (!shouldContinue) { + return result.match(onSuccess: (_) => Success(children), onError: Error.new); + } + } + return Success(children); + } + + Result _parseChild() { + return _currentChar == '<' + ? _parseElement().map((e) => e) + : _currentChar == '{' + ? _parseExpressionNode() + : _parseTextNode(); + } + + Result _parseExpressionNode() { + _pos++; // consume '{' + final expr = _parseBalancedExpression('}'); + _pos++; // consume '}' + return Success(JsxExpression(expr.trim())); + } + + Result _parseTextNode() { + final start = _pos; + while (!_isEof && _currentChar != '<' && _currentChar != '{') { + _pos++; + } + final text = _source.substring(start, _pos).trim(); + return Success(text.isEmpty ? null : JsxText(text)); + } + + Result _parseTextOrExpression() { + return _currentChar == '{' ? _parseExpressionNode() : _parseTextContent(); + } + + Result _parseTextContent() { + final start = _pos; + while (!_isEof && _currentChar != '<' && _currentChar != '{') { + _pos++; + } + final text = _source.substring(start, _pos).trim(); + return text.isEmpty ? Error('Empty text content') : Success(JsxText(text)); + } + + String _parseIdentifier() { + final start = _pos; + while (!_isEof && _isIdentifierChar(_currentChar)) { + _pos++; + } + return _source.substring(start, _pos); + } + + bool _isIdentifierChar(String c) => RegExp(r'[a-zA-Z0-9_\-]').hasMatch(c); + + String _parseBalancedExpression(String terminator) { + final buffer = StringBuffer(); + var depth = 0; + + while (!_isEof) { + final c = _currentChar; + + // Handle string literals + final isStringStart = c == '"' || c == "'" || c == '`'; + if (isStringStart) { + buffer.write(_parseString(c)); + continue; + } + + // Track nested braces/parens/brackets + final isOpener = c == '{' || c == '(' || c == '['; + final isCloser = c == '}' || c == ')' || c == ']'; + + if (isOpener) depth++; + if (isCloser) { + final atTerminator = depth == 0 && c == terminator; + if (atTerminator) break; + depth--; + } + + buffer.write(c); + _pos++; + } + + return buffer.toString(); + } + + String _parseString(String quote) { + final buffer = StringBuffer(quote); + _pos++; // consume opening quote + + while (!_isEof) { + final c = _currentChar; + buffer.write(c); + _pos++; + + final isEscape = c == '\\' && !_isEof; + if (isEscape) { + buffer.write(_currentChar); + _pos++; + continue; + } + + final isClosingQuote = c == quote; + if (isClosingQuote) break; + } + + return buffer.toString(); + } + + void _skipWhitespace() { + while (!_isEof && _currentChar.trim().isEmpty) { + _pos++; + } + } + + void _expect(String expected) { + final matches = _remaining.startsWith(expected); + if (matches) _pos += expected.length; + } +} diff --git a/packages/dart_jsx/lib/src/result_aliases.dart b/packages/dart_jsx/lib/src/result_aliases.dart new file mode 100644 index 0000000..630d103 --- /dev/null +++ b/packages/dart_jsx/lib/src/result_aliases.dart @@ -0,0 +1,14 @@ +/// Result type aliases for TypeScript/React developers. +/// +/// Provides `Ok` and `Err` as familiar aliases for `Success` and `Error`. +library; + +import 'package:nadz/nadz.dart'; + +/// Creates a success result (alias for Success). +/// Familiar to TypeScript/Rust developers. +Result Ok(T value) => Success(value); + +/// Creates an error result (alias for Error). +/// Familiar to TypeScript/Rust developers. +Result Err(E error) => Error(error); diff --git a/packages/dart_jsx/lib/src/transformer.dart b/packages/dart_jsx/lib/src/transformer.dart new file mode 100644 index 0000000..a047cc5 --- /dev/null +++ b/packages/dart_jsx/lib/src/transformer.dart @@ -0,0 +1,204 @@ +/// JSX transformer - converts JSX AST to Dart code. +library; + +import 'package:dart_jsx/src/parser.dart'; + +/// Transforms JSX AST nodes to Dart code using dart_node_react's JSX DSL. +class JsxTransformer { + /// HTML elements that are getters (not functions) in jsx.dart. + /// These elements cannot be called with () when they have no props. + static const _getterElements = { + 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', + 'strong', 'em', 'code', + }; + + /// Transforms a JSX node to Dart code. + String transform(JsxNode node) => switch (node) { + JsxElement e => _transformElement(e), + JsxFragment f => _transformFragment(f), + JsxText t => _transformText(t), + JsxExpression e => e.expression, + }; + + String _transformElement(JsxElement element) { + final tag = element.tagName; + final isComponent = _isComponentTag(tag); + + return isComponent + ? _transformComponent(element) + : _transformHtmlElement(element); + } + + bool _isComponentTag(String tag) => + tag.isNotEmpty && tag[0] == tag[0].toUpperCase(); + + String _transformComponent(JsxElement element) { + final props = _transformPropsAsMap(element.attributes); + final children = element.children; + + final hasChildren = children.isNotEmpty; + final propsArg = props.isEmpty ? '' : props; + + return hasChildren + ? '${element.tagName}($propsArg, children: ${_transformChildren(children)})' + : '${element.tagName}($propsArg)'; + } + + String _transformHtmlElement(JsxElement element) { + final factoryName = '\$${element.tagName}'; + final props = _transformProps(element.attributes); + final children = element.children; + + final hasProps = props.isNotEmpty; + final hasChildren = children.isNotEmpty; + final isGetter = _getterElements.contains(element.tagName); + + // No props, no children + // For getters (h1, h2, etc.): just use $h1 + // For functions (div, span, etc.): use $div() + final noPropsNoChildren = !hasProps && !hasChildren; + if (noPropsNoChildren) return isGetter ? factoryName : '$factoryName()'; + + // Props but no children + // For getters with props, use $h1Props(...) variant + // For functions, use $div(...) + final propsNoChildren = hasProps && !hasChildren; + if (propsNoChildren) { + return isGetter + ? '\$${element.tagName}Props($props)' + : '$factoryName($props)'; + } + + // Children (with or without props) + // For getters without props: $h1 >> [...] + // For getters with props: $h1Props(...) >> [...] + // For functions without props: $div() >> [...] + // For functions with props: $div(...) >> [...] + final factory = hasProps + ? (isGetter ? '\$${element.tagName}Props($props)' : '$factoryName($props)') + : (isGetter ? factoryName : '$factoryName()'); + final childrenCode = _transformChildrenForOperator(children); + return '$factory >> $childrenCode'; + } + + String _transformProps(List attrs) { + final parts = []; + + for (final attr in attrs) { + final part = switch (attr) { + JsxStringAttribute a => '${_dartPropName(a.name)}: \'${_escapeString(a.value)}\'', + JsxExpressionAttribute a => '${_dartPropName(a.name)}: ${a.expression}', + JsxBooleanAttribute a => '${_dartPropName(a.name)}: true', + JsxSpreadAttribute a => '...${a.expression}', + }; + parts.add(part); + } + + return parts.join(', '); + } + + String _transformPropsAsMap(List attrs) { + final parts = []; + + for (final attr in attrs) { + final part = switch (attr) { + JsxStringAttribute a => "'${a.name}': '${_escapeString(a.value)}'", + JsxExpressionAttribute a => "'${a.name}': ${a.expression}", + JsxBooleanAttribute a => "'${a.name}': true", + JsxSpreadAttribute a => '...${a.expression}', + }; + parts.add(part); + } + + return parts.isEmpty ? '' : '{${parts.join(', ')}}'; + } + + String _transformChildren(List children) { + final transformed = children + .map(transform) + .where((s) => s.isNotEmpty) + .toList(); + + return _formatArray(transformed); + } + + String _formatArray(List items) => switch (items.length) { + 0 => '[]', + 1 => items.first, + _ => '[${items.join(', ')}]', + }; + + String _transformChildrenForOperator(List children) { + final meaningful = children.where(_isMeaningfulNode).toList(); + + if (meaningful.isEmpty) return "''"; + if (meaningful.length == 1) return _transformSingleChild(meaningful.first); + + final transformed = meaningful.map(_transformChildForList).toList(); + return _formatChildrenArray(transformed); + } + + String _formatChildrenArray(List items) { + final joined = items.join(', '); + final isTooLong = joined.length > 80; + if (!isTooLong) return '[${joined}]'; + + final formattedItems = items.map((item) { + final hasNewlines = item.contains('\n'); + return hasNewlines ? item.replaceAll('\n', '\n ') : item; + }).join(',\n '); + + return '[\n $formattedItems,\n]'; + } + + bool _isMeaningfulNode(JsxNode node) => switch (node) { + JsxText t => t.text.trim().isNotEmpty, + _ => true, + }; + + String _transformSingleChild(JsxNode node) => switch (node) { + JsxText t => "'${_escapeString(t.text)}'", + JsxExpression e => e.expression, + JsxElement e => _wrapIfNeeded(transform(e)), + JsxFragment f => _wrapIfNeeded(transform(f)), + }; + + /// Wraps code in parentheses if it contains >> to prevent chaining issues. + String _wrapIfNeeded(String code) => + code.contains(' >> ') ? '($code)' : code; + + String _transformChildForList(JsxNode node) => switch (node) { + JsxText t => "'${_escapeString(t.text)}'", + JsxExpression e => e.expression, + _ => transform(node), + }; + + String _transformFragment(JsxFragment fragment) { + final children = _transformChildrenForOperator(fragment.children); + return '\$fragment >> $children'; + } + + String _transformText(JsxText text) => "'${_escapeString(text.text)}'"; + + String _dartPropName(String jsxName) => switch (jsxName) { + 'class' => 'className', + 'for' => 'htmlFor', + 'readonly' => 'readOnly', + 'tabindex' => 'tabIndex', + 'colspan' => 'colSpan', + 'rowspan' => 'rowSpan', + 'maxlength' => 'maxLength', + 'minlength' => 'minLength', + 'autocomplete' => 'autoComplete', + 'autofocus' => 'autoFocus', + 'autoplay' => 'autoPlay', + _ => jsxName, + }; + + String _escapeString(String s) => s + .replaceAll('\\', '\\\\') + .replaceAll("'", "\\'") + .replaceAll('\n', '\\n') + .replaceAll('\r', '\\r') + .replaceAll('\t', '\\t'); +} diff --git a/packages/dart_jsx/lib/src/transpiler.dart b/packages/dart_jsx/lib/src/transpiler.dart new file mode 100644 index 0000000..62332e4 --- /dev/null +++ b/packages/dart_jsx/lib/src/transpiler.dart @@ -0,0 +1,366 @@ +/// JSX transpiler - processes Dart files containing JSX. +library; + +import 'package:dart_jsx/src/parser.dart'; +import 'package:dart_jsx/src/transformer.dart'; +import 'package:nadz/nadz.dart'; + +/// Transpiles Dart source code containing JSX to pure Dart. +/// +/// JSX can be embedded in Dart using the `<>` syntax directly. +/// The transpiler finds JSX blocks and converts them to dart_node_react calls. +/// +/// Example input: +/// ```dart +/// final element =
+///

Hello

+///
; +/// ``` +/// +/// Example output: +/// ```dart +/// final element = $div(className: 'app') >> [ +/// $h1 >> 'Hello', +/// ]; +/// ``` +class JsxTranspiler { + JsxTranspiler() : _transformer = JsxTransformer(); + + final JsxTransformer _transformer; + + /// Transpiles a Dart source file containing JSX. + Result transpile(String source) { + final buffer = StringBuffer(); + var pos = 0; + + while (pos < source.length) { + final jsxStart = _findJsxStart(source, pos); + + // No more JSX found + final noMoreJsx = jsxStart == -1; + if (noMoreJsx) { + buffer.write(source.substring(pos)); + break; + } + + // Write content before JSX + buffer.write(source.substring(pos, jsxStart)); + + // Parse and transform JSX + final jsxResult = _extractAndTransformJsx(source, jsxStart); + final hasError = jsxResult.match( + onSuccess: (result) { + buffer.write(result.code); + pos = result.endPos; + return false; + }, + onError: (e) => true, + ); + + if (hasError) { + return jsxResult.match( + onSuccess: (_) => Error('Unexpected success'), + onError: Error.new, + ); + } + } + + return Success(buffer.toString()); + } + + /// Finds the start of a JSX block. + /// Looks for `<` followed by a valid tag name or `>` (fragment). + int _findJsxStart(String source, int startPos) { + var pos = startPos; + + while (pos < source.length) { + final ltPos = source.indexOf('<', pos); + final notFound = ltPos == -1; + if (notFound) return -1; + + // Skip if inside a string + final inString = _isInsideString(source, ltPos); + if (inString) { + pos = ltPos + 1; + continue; + } + + // Skip if inside a comment + final inComment = _isInsideComment(source, ltPos); + if (inComment) { + pos = ltPos + 1; + continue; + } + + // Check what follows '<' + final afterLt = ltPos + 1 < source.length ? source[ltPos + 1] : ''; + + // Fragment: <> + final isFragment = afterLt == '>'; + if (isFragment) return ltPos; + + // HTML element: > or > + final isComponent = RegExp(r'[A-Z]').hasMatch(afterLt); + if (isComponent) { + // Check if this is a Dart generic type, not JSX + final isGeneric = _isGenericType(source, ltPos); + if (!isGeneric) return ltPos; + } + + // Not JSX (could be comparison operator or generic) + pos = ltPos + 1; + } + + return -1; + } + + bool _isInsideString(String source, int pos) { + var inSingleQuote = false; + var inDoubleQuote = false; + var inTripleSingle = false; + var inTripleDouble = false; + var i = 0; + + while (i < pos) { + final c = source[i]; + final next2 = i + 2 < source.length ? source.substring(i, i + 3) : ''; + + // Check for triple quotes first + final isTripleSingleQuote = next2 == "'''"; + if (isTripleSingleQuote && !inDoubleQuote && !inTripleDouble) { + inTripleSingle = !inTripleSingle; + i += 3; + continue; + } + + final isTripleDoubleQuote = next2 == '"""'; + if (isTripleDoubleQuote && !inSingleQuote && !inTripleSingle) { + inTripleDouble = !inTripleDouble; + i += 3; + continue; + } + + // Skip if in triple quotes + final inTriple = inTripleSingle || inTripleDouble; + if (inTriple) { + i++; + continue; + } + + // Handle escape sequences + final isEscape = c == '\\'; + if (isEscape && (inSingleQuote || inDoubleQuote)) { + i += 2; + continue; + } + + // Toggle string states + final isSingleQuote = c == "'"; + if (isSingleQuote && !inDoubleQuote) { + inSingleQuote = !inSingleQuote; + } + + final isDoubleQuote = c == '"'; + if (isDoubleQuote && !inSingleQuote) { + inDoubleQuote = !inDoubleQuote; + } + + i++; + } + + return inSingleQuote || inDoubleQuote || inTripleSingle || inTripleDouble; + } + + bool _isInsideComment(String source, int pos) { + var inLineComment = false; + var inBlockComment = false; + var i = 0; + + while (i < pos) { + final c = source[i]; + final next = i + 1 < source.length ? source[i + 1] : ''; + + // Check for comment start + final isLineCommentStart = c == '/' && next == '/' && !inBlockComment; + if (isLineCommentStart) { + inLineComment = true; + i += 2; + continue; + } + + final isBlockCommentStart = c == '/' && next == '*' && !inLineComment; + if (isBlockCommentStart) { + inBlockComment = true; + i += 2; + continue; + } + + // Check for comment end + final isLineEnd = c == '\n' && inLineComment; + if (isLineEnd) { + inLineComment = false; + } + + final isBlockCommentEnd = c == '*' && next == '/' && inBlockComment; + if (isBlockCommentEnd) { + inBlockComment = false; + i += 2; + continue; + } + + i++; + } + + return inLineComment || inBlockComment; + } + + /// Checks if `<` at pos is part of a Dart generic type, not JSX. + bool _isGenericType(String source, int ltPos) { + var end = ltPos + 1; + while (end < source.length && RegExp(r'[a-zA-Z0-9_]').hasMatch(source[end])) { + end++; + } + final identifier = source.substring(ltPos + 1, end); + + const genericTypes = { + 'List', 'Map', 'Set', 'Future', 'Stream', 'Iterable', + 'Iterator', 'Function', 'Record', 'Type', 'Symbol', + }; + + if (genericTypes.contains(identifier)) return true; + + // If preceded by alphanumeric (like `useState<`), it's a generic param + final prevChar = ltPos > 0 ? source[ltPos - 1] : ''; + if (RegExp(r'[a-zA-Z0-9_]').hasMatch(prevChar)) return true; + + // If next char is `<` (nested generic), it's generic + final nextChar = end < source.length ? source[end] : ''; + if (nextChar == '<') return true; + + return false; + } + + Result<({String code, int endPos}), String> _extractAndTransformJsx( + String source, + int startPos, + ) { + // Find the end of the JSX expression + final endResult = _findJsxEnd(source, startPos); + + return endResult.match( + onSuccess: (endPos) { + final jsxSource = source.substring(startPos, endPos); + final parser = JsxParser(jsxSource); + + return parser.parse().match( + onSuccess: (node) { + final code = _transformer.transform(node); + return Success((code: code, endPos: endPos)); + }, + onError: Error.new, + ); + }, + onError: Error.new, + ); + } + + Result _findJsxEnd(String source, int startPos) { + var pos = startPos + 1; // skip initial '<' + var depth = 1; + + while (pos < source.length && depth > 0) { + final c = source[pos]; + + // Handle strings in expressions + final isStringStart = c == '"' || c == "'" || c == '`'; + if (isStringStart) { + pos = _skipString(source, pos); + continue; + } + + // Handle opening tag + final isOpenTag = c == '<' && !_isClosingTag(source, pos); + if (isOpenTag) { + depth++; + pos++; + continue; + } + + // Handle closing tag + final isCloseTagStart = c == '<' && _isClosingTag(source, pos); + if (isCloseTagStart) { + depth--; + pos = _skipToTagEnd(source, pos); + continue; + } + + // Handle self-closing + final next = pos + 1 < source.length ? source[pos + 1] : ''; + final isSelfClose = c == '/' && next == '>'; + if (isSelfClose) { + depth--; + pos += 2; + continue; + } + + // Handle fragment close + final next2 = + pos + 2 < source.length ? source.substring(pos, pos + 3) : ''; + final isFragmentClose = next2 == ''; + if (isFragmentClose) { + depth--; + pos += 3; + continue; + } + + pos++; + } + + return depth == 0 + ? Success(pos) + : Error('Unclosed JSX element starting at position $startPos'); + } + + bool _isClosingTag(String source, int pos) => + pos + 1 < source.length && source[pos + 1] == '/'; + + int _skipToTagEnd(String source, int pos) { + while (pos < source.length && source[pos] != '>') { + pos++; + } + return pos + 1; + } + + int _skipString(String source, int pos) { + final quote = source[pos]; + pos++; + + while (pos < source.length) { + final c = source[pos]; + + final isEscape = c == '\\'; + if (isEscape) { + pos += 2; + continue; + } + + final isEndQuote = c == quote; + if (isEndQuote) { + return pos + 1; + } + + pos++; + } + + return pos; + } +} + +/// Convenience function to transpile JSX in a Dart source file. +Result transpileJsx(String source) => + JsxTranspiler().transpile(source); diff --git a/packages/dart_jsx/pubspec.lock b/packages/dart_jsx/pubspec.lock new file mode 100644 index 0000000..4a7171d --- /dev/null +++ b/packages/dart_jsx/pubspec.lock @@ -0,0 +1,405 @@ +# Generated by pub +# See https://dart.dev/tools/pub/glossary#lockfile +packages: + _fe_analyzer_shared: + dependency: transitive + description: + name: _fe_analyzer_shared + sha256: "5b7468c326d2f8a4f630056404ca0d291ade42918f4a3c6233618e724f39da8e" + url: "https://pub.dev" + source: hosted + version: "92.0.0" + analyzer: + dependency: transitive + description: + name: analyzer + sha256: "70e4b1ef8003c64793a9e268a551a82869a8a96f39deb73dea28084b0e8bf75e" + url: "https://pub.dev" + source: hosted + version: "9.0.0" + args: + dependency: transitive + description: + name: args + sha256: d0481093c50b1da8910eb0bb301626d4d8eb7284aa739614d2b394ee09e3ea04 + url: "https://pub.dev" + source: hosted + version: "2.7.0" + async: + dependency: transitive + description: + name: async + sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb" + url: "https://pub.dev" + source: hosted + version: "2.13.0" + austerity: + dependency: "direct main" + description: + name: austerity + sha256: e81f52faa46859ed080ad6c87de3409b379d162c083151d6286be6eb7b71f816 + url: "https://pub.dev" + source: hosted + version: "1.3.0" + boolean_selector: + dependency: transitive + description: + name: boolean_selector + sha256: "8aab1771e1243a5063b8b0ff68042d67334e3feab9e95b9490f9a6ebf73b42ea" + url: "https://pub.dev" + source: hosted + version: "2.1.2" + cli_config: + dependency: transitive + description: + name: cli_config + sha256: ac20a183a07002b700f0c25e61b7ee46b23c309d76ab7b7640a028f18e4d99ec + url: "https://pub.dev" + source: hosted + version: "0.2.0" + collection: + dependency: transitive + description: + name: collection + sha256: "2f5709ae4d3d59dd8f7cd309b4e023046b57d8a6c82130785d2b0e5868084e76" + url: "https://pub.dev" + source: hosted + version: "1.19.1" + convert: + dependency: transitive + description: + name: convert + sha256: b30acd5944035672bc15c6b7a8b47d773e41e2f17de064350988c5d02adb1c68 + url: "https://pub.dev" + source: hosted + version: "3.1.2" + coverage: + dependency: transitive + description: + name: coverage + sha256: "5da775aa218eaf2151c721b16c01c7676fbfdd99cebba2bf64e8b807a28ff94d" + url: "https://pub.dev" + source: hosted + version: "1.15.0" + crypto: + dependency: transitive + description: + name: crypto + sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf + url: "https://pub.dev" + source: hosted + version: "3.0.7" + file: + dependency: transitive + description: + name: file + sha256: a3b4f84adafef897088c160faf7dfffb7696046cb13ae90b508c2cbc95d3b8d4 + url: "https://pub.dev" + source: hosted + version: "7.0.1" + frontend_server_client: + dependency: transitive + description: + name: frontend_server_client + sha256: f64a0333a82f30b0cca061bc3d143813a486dc086b574bfb233b7c1372427694 + url: "https://pub.dev" + source: hosted + version: "4.0.0" + glob: + dependency: transitive + description: + name: glob + sha256: c3f1ee72c96f8f78935e18aa8cecced9ab132419e8625dc187e1c2408efc20de + url: "https://pub.dev" + source: hosted + version: "2.1.3" + http_multi_server: + dependency: transitive + description: + name: http_multi_server + sha256: aa6199f908078bb1c5efb8d8638d4ae191aac11b311132c3ef48ce352fb52ef8 + url: "https://pub.dev" + source: hosted + version: "3.2.2" + http_parser: + dependency: transitive + description: + name: http_parser + sha256: "178d74305e7866013777bab2c3d8726205dc5a4dd935297175b19a23a2e66571" + url: "https://pub.dev" + source: hosted + version: "4.1.2" + io: + dependency: transitive + description: + name: io + sha256: dfd5a80599cf0165756e3181807ed3e77daf6dd4137caaad72d0b7931597650b + url: "https://pub.dev" + source: hosted + version: "1.0.5" + lints: + dependency: "direct dev" + description: + name: lints + sha256: c35bb79562d980e9a453fc715854e1ed39e24e7d0297a880ef54e17f9874a9d7 + url: "https://pub.dev" + source: hosted + version: "5.1.1" + logging: + dependency: transitive + description: + name: logging + sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61 + url: "https://pub.dev" + source: hosted + version: "1.3.0" + matcher: + dependency: transitive + description: + name: matcher + sha256: "12956d0ad8390bbcc63ca2e1469c0619946ccb52809807067a7020d57e647aa6" + url: "https://pub.dev" + source: hosted + version: "0.12.18" + meta: + dependency: transitive + description: + name: meta + sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394" + url: "https://pub.dev" + source: hosted + version: "1.17.0" + mime: + dependency: transitive + description: + name: mime + sha256: "41a20518f0cb1256669420fdba0cd90d21561e560ac240f26ef8322e45bb7ed6" + url: "https://pub.dev" + source: hosted + version: "2.0.0" + nadz: + dependency: "direct main" + description: + name: nadz + sha256: "749586d5d9c94c3660f85c4fa41979345edd5179ef221d6ac9127f36ca1674f8" + url: "https://pub.dev" + source: hosted + version: "0.0.7-beta" + node_preamble: + dependency: transitive + description: + name: node_preamble + sha256: "6e7eac89047ab8a8d26cf16127b5ed26de65209847630400f9aefd7cd5c730db" + url: "https://pub.dev" + source: hosted + version: "2.0.2" + package_config: + dependency: transitive + description: + name: package_config + sha256: f096c55ebb7deb7e384101542bfba8c52696c1b56fca2eb62827989ef2353bbc + url: "https://pub.dev" + source: hosted + version: "2.2.0" + path: + dependency: transitive + description: + name: path + sha256: "75cca69d1490965be98c73ceaea117e8a04dd21217b37b292c9ddbec0d955bc5" + url: "https://pub.dev" + source: hosted + version: "1.9.1" + pool: + dependency: transitive + description: + name: pool + sha256: "978783255c543aa3586a1b3c21f6e9d720eb315376a915872c61ef8b5c20177d" + url: "https://pub.dev" + source: hosted + version: "1.5.2" + pub_semver: + dependency: transitive + description: + name: pub_semver + sha256: "5bfcf68ca79ef689f8990d1160781b4bad40a3bd5e5218ad4076ddb7f4081585" + url: "https://pub.dev" + source: hosted + version: "2.2.0" + shelf: + dependency: transitive + description: + name: shelf + sha256: e7dd780a7ffb623c57850b33f43309312fc863fb6aa3d276a754bb299839ef12 + url: "https://pub.dev" + source: hosted + version: "1.4.2" + shelf_packages_handler: + dependency: transitive + description: + name: shelf_packages_handler + sha256: "89f967eca29607c933ba9571d838be31d67f53f6e4ee15147d5dc2934fee1b1e" + url: "https://pub.dev" + source: hosted + version: "3.0.2" + shelf_static: + dependency: transitive + description: + name: shelf_static + sha256: c87c3875f91262785dade62d135760c2c69cb217ac759485334c5857ad89f6e3 + url: "https://pub.dev" + source: hosted + version: "1.1.3" + shelf_web_socket: + dependency: transitive + description: + name: shelf_web_socket + sha256: "3632775c8e90d6c9712f883e633716432a27758216dfb61bd86a8321c0580925" + url: "https://pub.dev" + source: hosted + version: "3.0.0" + source_map_stack_trace: + dependency: transitive + description: + name: source_map_stack_trace + sha256: c0713a43e323c3302c2abe2a1cc89aa057a387101ebd280371d6a6c9fa68516b + url: "https://pub.dev" + source: hosted + version: "2.1.2" + source_maps: + dependency: transitive + description: + name: source_maps + sha256: "190222579a448b03896e0ca6eca5998fa810fda630c1d65e2f78b3f638f54812" + url: "https://pub.dev" + source: hosted + version: "0.10.13" + source_span: + dependency: transitive + description: + name: source_span + sha256: "254ee5351d6cb365c859e20ee823c3bb479bf4a293c22d17a9f1bf144ce86f7c" + url: "https://pub.dev" + source: hosted + version: "1.10.1" + stack_trace: + dependency: transitive + description: + name: stack_trace + sha256: "8b27215b45d22309b5cddda1aa2b19bdfec9df0e765f2de506401c071d38d1b1" + url: "https://pub.dev" + source: hosted + version: "1.12.1" + stream_channel: + dependency: transitive + description: + name: stream_channel + sha256: "969e04c80b8bcdf826f8f16579c7b14d780458bd97f56d107d3950fdbeef059d" + url: "https://pub.dev" + source: hosted + version: "2.1.4" + string_scanner: + dependency: transitive + description: + name: string_scanner + sha256: "921cd31725b72fe181906c6a94d987c78e3b98c2e205b397ea399d4054872b43" + url: "https://pub.dev" + source: hosted + version: "1.4.1" + term_glyph: + dependency: transitive + description: + name: term_glyph + sha256: "7f554798625ea768a7518313e58f83891c7f5024f88e46e7182a4558850a4b8e" + url: "https://pub.dev" + source: hosted + version: "1.2.2" + test: + dependency: "direct dev" + description: + name: test + sha256: "77cc98ea27006c84e71a7356cf3daf9ddbde2d91d84f77dbfe64cf0e4d9611ae" + url: "https://pub.dev" + source: hosted + version: "1.28.0" + test_api: + dependency: transitive + description: + name: test_api + sha256: "19a78f63e83d3a61f00826d09bc2f60e191bf3504183c001262be6ac75589fb8" + url: "https://pub.dev" + source: hosted + version: "0.7.8" + test_core: + dependency: transitive + description: + name: test_core + sha256: f1072617a6657e5fc09662e721307f7fb009b4ed89b19f47175d11d5254a62d4 + url: "https://pub.dev" + source: hosted + version: "0.6.14" + typed_data: + dependency: transitive + description: + name: typed_data + sha256: f9049c039ebfeb4cf7a7104a675823cd72dba8297f264b6637062516699fa006 + url: "https://pub.dev" + source: hosted + version: "1.4.0" + vm_service: + dependency: transitive + description: + name: vm_service + sha256: "45caa6c5917fa127b5dbcfbd1fa60b14e583afdc08bfc96dda38886ca252eb60" + url: "https://pub.dev" + source: hosted + version: "15.0.2" + watcher: + dependency: transitive + description: + name: watcher + sha256: "592ab6e2892f67760543fb712ff0177f4ec76c031f02f5b4ff8d3fc5eb9fb61a" + url: "https://pub.dev" + source: hosted + version: "1.1.4" + web: + dependency: transitive + description: + name: web + sha256: "868d88a33d8a87b18ffc05f9f030ba328ffefba92d6c127917a2ba740f9cfe4a" + url: "https://pub.dev" + source: hosted + version: "1.1.1" + web_socket: + dependency: transitive + description: + name: web_socket + sha256: "34d64019aa8e36bf9842ac014bb5d2f5586ca73df5e4d9bf5c936975cae6982c" + url: "https://pub.dev" + source: hosted + version: "1.0.1" + web_socket_channel: + dependency: transitive + description: + name: web_socket_channel + sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8 + url: "https://pub.dev" + source: hosted + version: "3.0.3" + webkit_inspection_protocol: + dependency: transitive + description: + name: webkit_inspection_protocol + sha256: "87d3f2333bb240704cd3f1c6b5b7acd8a10e7f0bc28c28dcf14e782014f4a572" + url: "https://pub.dev" + source: hosted + version: "1.2.1" + yaml: + dependency: transitive + description: + name: yaml + sha256: b9da305ac7c39faa3f030eccd175340f968459dae4af175130b3fc47e40d76ce + url: "https://pub.dev" + source: hosted + version: "3.1.3" +sdks: + dart: ">=3.10.0 <4.0.0" diff --git a/packages/dart_jsx/pubspec.yaml b/packages/dart_jsx/pubspec.yaml new file mode 100644 index 0000000..afeba33 --- /dev/null +++ b/packages/dart_jsx/pubspec.yaml @@ -0,0 +1,15 @@ +name: dart_jsx +description: JSX transpiler for Dart - transforms JSX syntax to dart_node_react calls +version: 0.1.0 +repository: https://github.com/user/dart_node/tree/main/packages/dart_jsx + +environment: + sdk: ^3.10.0 + +dependencies: + austerity: ^1.3.0 + nadz: ^0.0.7-beta + +dev_dependencies: + lints: ^5.0.0 + test: ^1.25.0 diff --git a/packages/dart_jsx/syntaxes/dart-jsx.tmLanguage.json b/packages/dart_jsx/syntaxes/dart-jsx.tmLanguage.json new file mode 100644 index 0000000..41e63d9 --- /dev/null +++ b/packages/dart_jsx/syntaxes/dart-jsx.tmLanguage.json @@ -0,0 +1,211 @@ +{ + "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json", + "name": "Dart JSX", + "scopeName": "source.dart.jsx", + "patterns": [ + { "include": "#jsx-element" }, + { "include": "source.dart" } + ], + "repository": { + "jsx-element": { + "patterns": [ + { "include": "#jsx-tag-without-attributes" }, + { "include": "#jsx-tag-without-attributes-lowercase" }, + { "include": "#jsx-tag-with-attributes" }, + { "include": "#jsx-tag-with-attributes-lowercase" }, + { "include": "#jsx-tag-self-closing" }, + { "include": "#jsx-tag-self-closing-lowercase" }, + { "include": "#jsx-tag-close" } + ] + }, + "jsx-tag-without-attributes": { + "name": "meta.tag.without-attributes.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-children" } + ] + }, + "jsx-tag-without-attributes-lowercase": { + "name": "meta.tag.without-attributes.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-children" } + ] + }, + "jsx-tag-with-attributes": { + "name": "meta.tag.with-attributes.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(?=[\\s\\n{])", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { + "begin": "\\G", + "end": "(>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + { "include": "#jsx-children" } + ] + }, + "jsx-tag-with-attributes-lowercase": { + "name": "meta.tag.with-attributes.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(?=[\\s\\n{])", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" } + }, + "end": "()", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { + "begin": "\\G", + "end": "(>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + { "include": "#jsx-children" } + ] + }, + "jsx-tag-self-closing": { + "name": "meta.tag.self-closing.jsx", + "begin": "(<)([A-Z][a-zA-Z0-9-]*)(?=[\\s\\n{]|/>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" } + }, + "end": "(/>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + "jsx-tag-self-closing-lowercase": { + "name": "meta.tag.self-closing.jsx", + "begin": "(<)([a-z][a-zA-Z0-9-]*)(?=[\\s\\n{]|/>)", + "beginCaptures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx" } + }, + "end": "(/>)", + "endCaptures": { + "1": { "name": "punctuation.definition.tag.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-attribute" } + ] + }, + "jsx-tag-close": { + "name": "meta.tag.close.jsx", + "match": "()", + "captures": { + "1": { "name": "punctuation.definition.tag.begin.jsx" }, + "2": { "name": "entity.name.tag.jsx support.class.component.jsx" }, + "3": { "name": "punctuation.definition.tag.end.jsx" } + } + }, + "jsx-attribute": { + "patterns": [ + { + "name": "entity.other.attribute-name.jsx", + "match": "\\b[a-zA-Z_][a-zA-Z0-9_-]*\\b(?=\\s*=)" + }, + { + "name": "string.quoted.double.jsx", + "begin": "\"", + "end": "\"", + "patterns": [ + { "name": "constant.character.escape.jsx", "match": "\\\\." } + ] + }, + { + "name": "string.quoted.single.jsx", + "begin": "'", + "end": "'", + "patterns": [ + { "name": "constant.character.escape.jsx", "match": "\\\\." } + ] + }, + { "include": "#jsx-expression" } + ] + }, + "jsx-children": { + "patterns": [ + { "include": "#jsx-element" }, + { "include": "#jsx-expression" }, + { + "name": "string.unquoted.jsx", + "match": "[^<>{}]+" + } + ] + }, + "jsx-expression": { + "name": "meta.embedded.expression.jsx", + "begin": "\\{", + "beginCaptures": { + "0": { "name": "punctuation.section.embedded.begin.jsx" } + }, + "end": "\\}", + "endCaptures": { + "0": { "name": "punctuation.section.embedded.end.jsx" } + }, + "patterns": [ + { "include": "#jsx-nested-braces" }, + { "include": "source.dart" } + ] + }, + "jsx-nested-braces": { + "begin": "\\{", + "beginCaptures": { "0": { "name": "punctuation.section.block.begin.dart" } }, + "end": "\\}", + "endCaptures": { "0": { "name": "punctuation.section.block.end.dart" } }, + "patterns": [ + { "include": "#jsx-nested-braces" }, + { "include": "source.dart" } + ] + } + } +} diff --git a/packages/dart_jsx/test/integration_test.dart b/packages/dart_jsx/test/integration_test.dart new file mode 100644 index 0000000..7674d17 --- /dev/null +++ b/packages/dart_jsx/test/integration_test.dart @@ -0,0 +1,230 @@ +import 'dart:io'; + +import 'package:test/test.dart'; + +void main() { + test('jsx_demo example transpiles, compiles, and produces valid JS', () async { + final projectRoot = Directory.current.parent.parent.path; + final testDir = Directory.systemTemp.createTempSync('jsx_integration_test'); + + try { + final jsxSourcePath = '${testDir.path}/test_component.jsx'; + final transpiledPath = '${testDir.path}/test_component.g.dart'; + final appPath = '${testDir.path}/app.dart'; + final pubspecPath = '${testDir.path}/pubspec.yaml'; + + File(jsxSourcePath).writeAsStringSync(''' +/// Test component. +library; + +import 'package:dart_node_react/dart_node_react.dart'; + +ReactElement TestComponent() { + final count = useState(0); + + return
+

Test JSX

+
{count.value}
+ +
; +} +'''); + + File(appPath).writeAsStringSync(''' +import 'dart:js_interop'; +import 'package:dart_node_react/dart_node_react.dart'; +import 'test_component.g.dart'; + +void main() { + final root = createRoot(document.getElementById('root')!); + root.render(TestComponent()); +} + +@JS('document') +external JSObject get document; + +extension on JSObject { + external JSObject? getElementById(String id); +} +'''); + + File(pubspecPath).writeAsStringSync(''' +name: jsx_integration_test +description: Integration test for JSX +version: 0.1.0 +publish_to: none + +environment: + sdk: ^3.10.0 + +dependencies: + dart_node_react: + path: $projectRoot/packages/dart_node_react +'''); + + final pubGetResult = Process.runSync( + 'dart', + ['pub', 'get'], + workingDirectory: testDir.path, + ); + expect(pubGetResult.exitCode, equals(0), reason: 'pub get must succeed: ${pubGetResult.stderr}'); + + final transpileResult = Process.runSync( + 'dart', + [ + 'run', + '$projectRoot/packages/dart_jsx/bin/jsx.dart', + jsxSourcePath, + transpiledPath, + ], + ); + expect(transpileResult.exitCode, equals(0), reason: 'JSX transpilation must succeed: ${transpileResult.stderr}'); + + final transpiledExists = File(transpiledPath).existsSync(); + expect(transpiledExists, isTrue, reason: 'Transpiled file must exist'); + + final transpiledContent = File(transpiledPath).readAsStringSync(); + expect(transpiledContent, contains('\$div(className: \'test\')'), reason: 'Transpiled output must contain div with className'); + expect(transpiledContent, contains('\$h1 >> \'Test JSX\''), reason: 'Transpiled output must contain h1 element'); + expect(transpiledContent, contains('\$button(onClick:'), reason: 'Transpiled output must contain button with onClick'); + expect(transpiledContent, contains('count.value'), reason: 'Transpiled output must reference count.value'); + expect(transpiledContent, contains('useState'), reason: 'Transpiled output must use useState'); + + final compileResult = Process.runSync( + 'dart', + [ + 'compile', + 'js', + 'app.dart', + '-o', + 'app.js', + ], + workingDirectory: testDir.path, + ); + expect(compileResult.exitCode, equals(0), reason: 'Dart to JS compilation must succeed: ${compileResult.stdout}\n${compileResult.stderr}'); + + final jsExists = File('${testDir.path}/app.js').existsSync(); + expect(jsExists, isTrue, reason: 'Compiled JS file must exist at ${testDir.path}/app.js'); + + final jsContent = File('${testDir.path}/app.js').readAsStringSync(); + expect(jsContent.isNotEmpty, isTrue, reason: 'Compiled JS must not be empty'); + expect(jsContent, contains('function'), reason: 'Compiled JS must contain function declarations'); + expect(jsContent, contains('main'), reason: 'Compiled JS must contain main function'); + + final jsLines = jsContent.split('\n').length; + expect(jsLines, greaterThan(10), reason: 'Compiled JS should have substantial content'); + } finally { + testDir.deleteSync(recursive: true); + } + }); + + test('counter.jsx from jsx_demo transpiles and compiles successfully', () async { + final projectRoot = Directory.current.parent.parent.path; + final exampleDir = '$projectRoot/examples/jsx_demo'; + final jsxFile = '$exampleDir/lib/counter.jsx'; + final gDartFile = '$exampleDir/lib/counter.g.dart'; + + final jsxExists = File(jsxFile).existsSync(); + expect(jsxExists, isTrue, reason: 'counter.jsx must exist in jsx_demo example'); + + final transpileResult = Process.runSync( + 'dart', + [ + 'run', + '$projectRoot/packages/dart_jsx/bin/jsx.dart', + jsxFile, + gDartFile, + ], + ); + expect(transpileResult.exitCode, equals(0), reason: 'counter.jsx transpilation must succeed: ${transpileResult.stderr}'); + + final gDartExists = File(gDartFile).existsSync(); + expect(gDartExists, isTrue, reason: 'counter.g.dart must be generated'); + + final gDartContent = File(gDartFile).readAsStringSync(); + expect(gDartContent, contains('ReactElement Counter()'), reason: 'Generated file must contain Counter function'); + expect(gDartContent, contains('useState'), reason: 'Generated file must use useState'); + expect(gDartContent, contains('\$div(className: \'counter\')'), reason: 'Generated file must contain counter div'); + expect(gDartContent, contains('\$button'), reason: 'Generated file must contain buttons'); + expect(gDartContent, contains('onClick:'), reason: 'Generated file must have onClick handlers'); + expect(gDartContent, contains('count.value'), reason: 'Generated file must reference count.value'); + + final testDir = Directory.systemTemp.createTempSync('jsx_demo_compile_test'); + + try { + final testJsxPath = '${testDir.path}/test_counter.jsx'; + final testGDartPath = '${testDir.path}/test_counter.g.dart'; + final testAppPath = '${testDir.path}/app.dart'; + final testPubspecPath = '${testDir.path}/pubspec.yaml'; + + File(testJsxPath).writeAsStringSync(File(jsxFile).readAsStringSync()); + + File(testPubspecPath).writeAsStringSync(''' +name: jsx_demo_test +description: Test compilation of jsx_demo counter +version: 0.1.0 +publish_to: none + +environment: + sdk: ^3.10.0 + +dependencies: + dart_node_react: + path: $projectRoot/packages/dart_node_react +'''); + + final transpileTest = Process.runSync( + 'dart', + [ + 'run', + '$projectRoot/packages/dart_jsx/bin/jsx.dart', + testJsxPath, + testGDartPath, + ], + ); + expect(transpileTest.exitCode, equals(0), reason: 'Test counter transpilation must succeed: ${transpileTest.stderr}'); + + File(testAppPath).writeAsStringSync(''' +import 'dart:js_interop'; +import 'package:dart_node_react/dart_node_react.dart'; +import 'test_counter.g.dart'; + +void main() { + final root = createRoot(document.getElementById('root')!); + root.render(Counter()); +} + +@JS('document') +external JSObject get document; + +extension on JSObject { + external JSObject? getElementById(String id); +} +'''); + + final pubGet = Process.runSync('dart', ['pub', 'get'], workingDirectory: testDir.path); + expect(pubGet.exitCode, equals(0), reason: 'pub get must succeed: ${pubGet.stderr}'); + + final compile = Process.runSync( + 'dart', + ['compile', 'js', 'app.dart', '-o', 'app.js'], + workingDirectory: testDir.path, + ); + expect(compile.exitCode, equals(0), reason: 'Counter app must compile to JS:\nSTDOUT: ${compile.stdout}\nSTDERR: ${compile.stderr}'); + + final jsFile = File('${testDir.path}/app.js'); + expect(jsFile.existsSync(), isTrue, reason: 'Compiled JS file must exist'); + + final jsContent = jsFile.readAsStringSync(); + expect(jsContent.isNotEmpty, isTrue, reason: 'Compiled JS must not be empty'); + expect(jsContent, contains('function'), reason: 'Compiled JS must contain functions'); + + final jsLines = jsContent.split('\n').length; + expect(jsLines, greaterThan(50), reason: 'Compiled JS should have substantial content'); + } finally { + testDir.deleteSync(recursive: true); + } + }); +} diff --git a/packages/dart_jsx/test/transpiler_test.dart b/packages/dart_jsx/test/transpiler_test.dart new file mode 100644 index 0000000..8ecbfca --- /dev/null +++ b/packages/dart_jsx/test/transpiler_test.dart @@ -0,0 +1,1453 @@ +import 'package:dart_jsx/dart_jsx.dart'; +import 'package:nadz/nadz.dart'; +import 'package:test/test.dart'; + +void main() { + test('parses simple element with text', () { + final parser = JsxParser('
Hello
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final node = (result as Success).value; + expect(node, isA()); + + final element = node as JsxElement; + expect(element.tagName, equals('div')); + expect(element.children.length, equals(1)); + expect((element.children.first as JsxText).text, equals('Hello')); + }); + + test('parses self-closing element', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('input')); + expect(element.isSelfClosing, isTrue); + expect(element.children, isEmpty); + }); + + test('parses element with string attribute', () { + final parser = JsxParser('
Content
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + + final attr = element.attributes.first as JsxStringAttribute; + expect(attr.name, equals('className')); + expect(attr.value, equals('container')); + }); + + test('parses element with expression attribute', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.name, equals('onClick')); + expect(attr.expression, equals('handleClick')); + }); + + test('parses element with boolean attribute', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + + final attr = element.attributes.first as JsxBooleanAttribute; + expect(attr.name, equals('disabled')); + }); + + test('parses nested elements', () { + final parser = JsxParser('

Title

Content

'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children.length, equals(2)); + + final h1 = element.children[0] as JsxElement; + expect(h1.tagName, equals('h1')); + + final p = element.children[1] as JsxElement; + expect(p.tagName, equals('p')); + }); + + test('parses fragment', () { + final parser = JsxParser('<>

First

Second

'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final fragment = (result as Success).value as JsxFragment; + expect(fragment.children.length, equals(2)); + }); + + test('parses expression children', () { + final parser = JsxParser('
{count}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + + final expr = element.children.first as JsxExpression; + expect(expr.expression, equals('count')); + }); + + test('transforms simple element to Dart', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [JsxText('Hello')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div() >> 'Hello'")); + }); + + test('transforms element with className', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [JsxStringAttribute('className', 'container')], + children: [JsxText('Content')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div(className: 'container') >> 'Content'")); + }); + + test('transforms element with onClick', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'button', + attributes: [JsxExpressionAttribute('onClick', 'handleClick')], + children: [JsxText('Click me')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$button(onClick: handleClick) >> 'Click me'")); + }); + + test('transforms nested elements', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [ + JsxElement( + tagName: 'h1', + attributes: [], + children: [JsxText('Title')], + isSelfClosing: false, + ), + JsxElement( + tagName: 'p', + attributes: [], + children: [JsxText('Content')], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div() >> [\$h1 >> 'Title', \$p() >> 'Content']")); + }); + + test('transforms fragment', () { + final transformer = JsxTransformer(); + final fragment = JsxFragment([ + JsxElement( + tagName: 'h1', + attributes: [], + children: [JsxText('First')], + isSelfClosing: false, + ), + JsxElement( + tagName: 'p', + attributes: [], + children: [JsxText('Second')], + isSelfClosing: false, + ), + ]); + + final result = transformer.transform(fragment); + expect(result, equals("\$fragment >> [\$h1 >> 'First', \$p() >> 'Second']")); + }); + + test('transpiles JSX in Dart source', () { + const source = ''' +final element =
+

Hello

+
; +'''; + + final result = transpileJsx(source); + expect(result.isSuccess, isTrue); + + final output = (result as Success).value; + expect(output, contains("\$div(className: 'app')")); + expect(output, contains("\$h1 >> 'Hello'")); + }); + + test('preserves non-JSX Dart code', () { + const source = ''' +import 'package:dart_node_react/dart_node_react.dart'; + +void main() { + final count = 0; + final element =
{count}
; + print(element); +} +'''; + + final result = transpileJsx(source); + expect(result.isSuccess, isTrue); + + final output = (result as Success).value; + expect(output, contains("import 'package:dart_node_react/dart_node_react.dart';")); + expect(output, contains('void main()')); + expect(output, contains('final count = 0;')); + expect(output, contains('\$div() >> count')); + }); + + test('ignores JSX-like syntax in strings', () { + const source = ''' +final html = '
Not JSX
'; +final element =
Real JSX
; +'''; + + final result = transpileJsx(source); + expect(result.isSuccess, isTrue); + + final output = (result as Success).value; + expect(output, contains("'
Not JSX
'")); + expect(output, contains("\$div() >> 'Real JSX'")); + }); + + test('ignores comparison operators', () { + const source = ''' +final isSmaller = a < b; +final element =
JSX
; +'''; + + final result = transpileJsx(source); + expect(result.isSuccess, isTrue); + + final output = (result as Success).value; + expect(output, contains('a < b')); + expect(output, contains("\$div() >> 'JSX'")); + }); + + test('handles complex expressions in attributes', () { + final parser = JsxParser( + '', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.expression, equals('() => setState(prev => prev + 1)')); + }); + + test('handles ternary in children', () { + final parser = JsxParser('
{isLoading ? "Loading..." : content}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + + final expr = element.children.first as JsxExpression; + expect(expr.expression, equals('isLoading ? "Loading..." : content')); + }); + + test('parses spread attributes', () { + final parser = JsxParser('
Content
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + + final attr = element.attributes.first as JsxSpreadAttribute; + expect(attr.expression, equals('props')); + }); + + test('parses multiple attributes on same element', () { + final parser = JsxParser( + '', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(3)); + + final classNameAttr = element.attributes[0] as JsxStringAttribute; + expect(classNameAttr.name, equals('className')); + expect(classNameAttr.value, equals('btn')); + + final disabledAttr = element.attributes[1] as JsxBooleanAttribute; + expect(disabledAttr.name, equals('disabled')); + + final onClickAttr = element.attributes[2] as JsxExpressionAttribute; + expect(onClickAttr.name, equals('onClick')); + expect(onClickAttr.expression, equals('handler')); + }); + + test('parses components with children', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('MyComponent')); + expect(element.children.length, equals(1)); + + final child = element.children.first as JsxElement; + expect(child.tagName, equals('Child')); + expect(child.isSelfClosing, isTrue); + }); + + test('parses empty self-closing components', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('EmptyComponent')); + expect(element.isSelfClosing, isTrue); + expect(element.children, isEmpty); + expect(element.attributes, isEmpty); + }); + + test('transforms spread attributes in HTML elements', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [JsxSpreadAttribute('props')], + children: [JsxText('Content')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div(...props) >> 'Content'")); + }); + + test('transforms multiple attributes on same element', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'button', + attributes: [ + JsxStringAttribute('className', 'btn'), + JsxBooleanAttribute('disabled'), + JsxExpressionAttribute('onClick', 'handler'), + ], + children: [JsxText('Click')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect( + result, + equals( + "\$button(className: 'btn', disabled: true, onClick: handler) >> 'Click'", + ), + ); + }); + + test('transforms components with children', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'MyComponent', + attributes: [], + children: [ + JsxElement( + tagName: 'Child', + attributes: [], + children: [], + isSelfClosing: true, + ), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals('MyComponent(, children: Child())')); + }); + + test('transforms empty self-closing components', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'EmptyComponent', + attributes: [], + children: [], + isSelfClosing: true, + ); + + final result = transformer.transform(element); + expect(result, equals('EmptyComponent()')); + }); + + test('parses deeply nested elements (3+ levels)', () { + final parser = JsxParser( + '

Deep

', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final div = (result as Success).value as JsxElement; + expect(div.tagName, equals('div')); + expect(div.children.length, equals(1)); + + final section = div.children[0] as JsxElement; + expect(section.tagName, equals('section')); + expect(section.children.length, equals(1)); + + final article = section.children[0] as JsxElement; + expect(article.tagName, equals('article')); + expect(article.children.length, equals(1)); + + final header = article.children[0] as JsxElement; + expect(header.tagName, equals('header')); + expect(header.children.length, equals(1)); + + final h1 = header.children[0] as JsxElement; + expect(h1.tagName, equals('h1')); + expect(h1.children.length, equals(1)); + expect((h1.children[0] as JsxText).text, equals('Deep')); + }); + + test('transforms deeply nested elements (3+ levels)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [ + JsxElement( + tagName: 'section', + attributes: [], + children: [ + JsxElement( + tagName: 'article', + attributes: [], + children: [ + JsxElement( + tagName: 'header', + attributes: [], + children: [ + JsxElement( + tagName: 'h1', + attributes: [], + children: [JsxText('Deep')], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains('\$div')); + expect(result, contains('\$section')); + expect(result, contains('\$article')); + expect(result, contains('\$header')); + expect(result, contains('\$h1')); + expect(result, contains('\'Deep\'')); + }); + + test('parses mixed children (text + elements + expressions)', () { + final parser = JsxParser('
Hello world {count} items
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('div')); + expect(element.children.length, equals(4)); + + expect((element.children[0] as JsxText).text, equals('Hello')); + expect((element.children[1] as JsxElement).tagName, equals('strong')); + expect((element.children[2] as JsxExpression).expression, equals('count')); + expect((element.children[3] as JsxText).text, equals('items')); + }); + + test('transforms mixed children (text + elements + expressions)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [ + JsxText('Hello '), + JsxElement( + tagName: 'strong', + attributes: [], + children: [JsxText('world')], + isSelfClosing: false, + ), + JsxExpression('count'), + JsxText(' items'), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains('\$div() >> [')); + expect(result, contains('\'Hello \'')); + expect(result, contains('\$strong >> \'world\'')); + expect(result, contains('count')); + expect(result, contains('\' items\'')); + }); + + test('parses single quotes in double-quoted attributes', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + + final attr = element.attributes[0] as JsxStringAttribute; + expect(attr.name, equals('title')); + expect(attr.value, equals('It\'s working')); + }); + + test('parses double quotes in single-quoted attributes', () { + final parser = JsxParser("
Text
"); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + + final attr = element.attributes[0] as JsxStringAttribute; + expect(attr.name, equals('title')); + expect(attr.value, equals('Say "hi"')); + }); + + test('parses attributes with special characters', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + + final attr = element.attributes[0] as JsxStringAttribute; + expect(attr.name, equals('data-test')); + expect(attr.value, equals('value-with-dashes')); + }); + + test('parses deeply nested mixed content', () { + final parser = JsxParser( + '

Text {expr1} more

{expr2}
', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final div = (result as Success).value as JsxElement; + expect(div.tagName, equals('div')); + expect(div.children.length, equals(2)); + + final p = div.children[0] as JsxElement; + expect(p.tagName, equals('p')); + expect(p.children.length, equals(3)); + expect((p.children[0] as JsxText).text, equals('Text')); + expect((p.children[1] as JsxExpression).expression, equals('expr1')); + expect((p.children[2] as JsxText).text, equals('more')); + + final span = div.children[1] as JsxElement; + expect(span.tagName, equals('span')); + expect(span.children.length, equals(1)); + expect((span.children[0] as JsxExpression).expression, equals('expr2')); + }); + + test('parses complex nested structure with multiple levels', () { + final parser = JsxParser( + '', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final ul = (result as Success).value as JsxElement; + expect(ul.tagName, equals('ul')); + expect(ul.children.length, equals(2)); + + final li1 = ul.children[0] as JsxElement; + expect(li1.tagName, equals('li')); + expect(li1.children.length, equals(1)); + + final a1 = li1.children[0] as JsxElement; + expect(a1.tagName, equals('a')); + expect(a1.attributes.length, equals(1)); + expect((a1.attributes[0] as JsxStringAttribute).value, equals('#')); + expect((a1.children[0] as JsxText).text, equals('Link 1')); + }); + + test('transpiles complex nested structure', () { + const source = ''' +final nav = ; +'''; + + final result = transpileJsx(source); + expect(result.isSuccess, isTrue); + + final output = (result as Success).value; + expect(output, contains('\$nav(className: \'menu\')')); + expect(output, contains('\$ul')); + expect(output, contains('\$li')); + expect(output, contains('\$a(href: \'/home\')')); + expect(output, contains('\'Home\'')); + expect(output, contains('\$a(href: \'/about\')')); + expect(output, contains('\'About\'')); + }); + + test('parses elements with multiple expressions and text', () { + final parser = JsxParser( + '
Count: {count}, Total: {total}, Status: {status}
', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children.length, equals(6)); + expect((element.children[0] as JsxText).text, equals('Count:')); + expect((element.children[1] as JsxExpression).expression, equals('count')); + expect((element.children[2] as JsxText).text, equals(', Total:')); + expect((element.children[3] as JsxExpression).expression, equals('total')); + expect((element.children[4] as JsxText).text, equals(', Status:')); + expect((element.children[5] as JsxExpression).expression, equals('status')); + }); + + test('transforms complex mixed children correctly', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'p', + attributes: [], + children: [ + JsxText('Value:'), + JsxExpression('x'), + JsxText('+'), + JsxExpression('y'), + JsxText('='), + JsxExpression('x + y'), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains('\$p() >> [')); + expect(result, contains('\'Value:\'')); + expect(result, contains('x')); + expect(result, contains('\'+\'')); + expect(result, contains('y')); + expect(result, contains('\'=\'')); + expect(result, contains('x + y')); + }); + + // ============================================================================ + // GETTER ELEMENT TESTS - h1-h6, strong, em, code are getters in dart_node_react + // They should NOT have () appended when used without props + // ============================================================================ + + test('h1 without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h1', + attributes: [], + children: [JsxText('Title')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + // $h1 is a getter in dart_node_react, NOT a function + // So it should be: $h1 >> 'Title' NOT $h1() >> 'Title' + expect(result, equals("\$h1 >> 'Title'")); + }); + + test('h2 without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h2', + attributes: [], + children: [JsxText('Subtitle')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$h2 >> 'Subtitle'")); + }); + + test('h3 without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h3', + attributes: [], + children: [JsxText('Section')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$h3 >> 'Section'")); + }); + + test('strong without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'strong', + attributes: [], + children: [JsxText('Bold')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$strong >> 'Bold'")); + }); + + test('em without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'em', + attributes: [], + children: [JsxText('Italic')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$em >> 'Italic'")); + }); + + test('code without props uses getter syntax (no parentheses)', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'code', + attributes: [], + children: [JsxText('snippet')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$code >> 'snippet'")); + }); + + test('h1 with props uses h1Props function', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h1', + attributes: [JsxStringAttribute('className', 'title')], + children: [JsxText('Title')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$h1Props(className: 'title') >> 'Title'")); + }); + + test('h2 with props uses h2Props function', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h2', + attributes: [JsxStringAttribute('id', 'subtitle')], + children: [JsxText('Subtitle')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$h2Props(id: 'subtitle') >> 'Subtitle'")); + }); + + test('empty h1 (no children, no props) uses getter syntax', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'h1', + attributes: [], + children: [], + isSelfClosing: true, + ); + + final result = transformer.transform(element); + expect(result, equals('\$h1')); + }); + + test('nested getter elements use correct syntax', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [ + JsxElement( + tagName: 'h1', + attributes: [], + children: [JsxText('Header')], + isSelfClosing: false, + ), + JsxElement( + tagName: 'h2', + attributes: [], + children: [JsxText('Subheader')], + isSelfClosing: false, + ), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains("\$h1 >> 'Header'")); + expect(result, contains("\$h2 >> 'Subheader'")); + // Should NOT contain $h1() or $h2() + expect(result.contains('\$h1()'), isFalse); + expect(result.contains('\$h2()'), isFalse); + }); + + test('parses empty element with opening and closing tags', () { + final parser = JsxParser('
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('div')); + expect(element.children, isEmpty); + expect(element.isSelfClosing, isFalse); + }); + + test('parses self-closing br tag', () { + final parser = JsxParser('
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('br')); + expect(element.isSelfClosing, isTrue); + expect(element.children, isEmpty); + }); + + test('parses deeply nested elements (6 levels)', () { + final parser = JsxParser( + '', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + var current = (result as Success).value as JsxElement; + expect(current.tagName, equals('div')); + expect(current.children.length, equals(1)); + + current = current.children[0] as JsxElement; + expect(current.tagName, equals('nav')); + + current = current.children[0] as JsxElement; + expect(current.tagName, equals('ul')); + + current = current.children[0] as JsxElement; + expect(current.tagName, equals('li')); + + current = current.children[0] as JsxElement; + expect(current.tagName, equals('a')); + + current = current.children[0] as JsxElement; + expect(current.tagName, equals('span')); + expect((current.children[0] as JsxText).text, equals('Deep')); + }); + + test('parses numeric attribute with expression', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.name, equals('tabIndex')); + expect(attr.expression, equals('0')); + }); + + test('parses template literal in expression', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.name, equals('className')); + expect(attr.expression, contains('`test-\${id}`')); + }); + + test('parses special characters in text content', () { + final parser = JsxParser('
© 2024 & <Company>
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children.length, equals(1)); + final text = element.children[0] as JsxText; + expect(text.text, contains('©')); + expect(text.text, contains('&')); + }); + + test('parses escaped backslash in string attribute', () { + final parser = JsxParser(r'
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxStringAttribute; + expect(attr.value, equals(r'path\\to\\file')); + }); + + test('returns error for unclosed tag', () { + final parser = JsxParser('
Content'); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, contains('Expected closing tag')); + }); + + test('returns error for mismatched tags', () { + final parser = JsxParser('
Content'); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, contains('position')); + }); + + test('parses unclosed fragment as error', () { + final parser = JsxParser('<>Content'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final fragment = (result as Success).value as JsxFragment; + expect(fragment.children.length, equals(1)); + }); + + test('returns error for empty JSX input', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, equals('Empty JSX input')); + }); + + test('returns error for whitespace-only input', () { + final parser = JsxParser(' \n\t '); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, equals('Empty JSX input')); + }); + + test('returns error for missing tag name', () { + final parser = JsxParser('<>Content'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final fragment = (result as Success).value as JsxFragment; + expect(fragment.children.length, equals(1)); + }); + + test('parses fragment with empty content', () { + final parser = JsxParser('<>'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final fragment = (result as Success).value as JsxFragment; + expect(fragment.children, isEmpty); + }); + + test('parses nested fragments', () { + final parser = JsxParser('<><>
Inner
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final outerFragment = (result as Success).value as JsxFragment; + expect(outerFragment.children.length, equals(1)); + + final innerFragment = outerFragment.children[0] as JsxFragment; + expect(innerFragment.children.length, equals(1)); + + final div = innerFragment.children[0] as JsxElement; + expect(div.tagName, equals('div')); + }); + + test('parses complex nested expressions', () { + final parser = JsxParser('
{items.map((item) => {item.name})}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, contains('items.map')); + expect(expr.expression, contains('{item.name}')); + }); + + test('parses attribute with nested braces', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.name, equals('style')); + expect(attr.expression, contains('{color: "red", fontSize: 14}')); + }); + + test('parses multiple boolean attributes', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(3)); + + expect((element.attributes[0] as JsxBooleanAttribute).name, equals('disabled')); + expect((element.attributes[1] as JsxBooleanAttribute).name, equals('readOnly')); + expect((element.attributes[2] as JsxBooleanAttribute).name, equals('required')); + }); + + test('parses mix of attribute types', () { + final parser = JsxParser( + '', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(4)); + + expect(element.attributes[0], isA()); + expect(element.attributes[1], isA()); + expect(element.attributes[2], isA()); + expect(element.attributes[3], isA()); + }); + + test('returns error for invalid attribute syntax', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, contains('Expected')); + }); + + test('parses whitespace-heavy JSX', () { + final parser = JsxParser(''' +
+ Text content +
+ '''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('div')); + expect(element.attributes.length, equals(2)); + expect(element.children.length, equals(1)); + }); + + test('parses JSX with newlines in text', () { + final parser = JsxParser('
Line 1\nLine 2\nLine 3
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final text = element.children.first as JsxText; + expect(text.text, contains('Line 1')); + expect(text.text, contains('Line 2')); + expect(text.text, contains('Line 3')); + }); + + test('transforms special characters in text', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [JsxText("Text with 'quotes' and \"double quotes\"")], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains("\\'")); + }); + + test('transforms newlines in text content', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [JsxText('Line 1\nLine 2')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, contains('\\n')); + }); + + test('parses very deeply nested elements (10 levels)', () { + final parser = JsxParser( + 'Deep', + ); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + var depth = 0; + var current = (result as Success).value as JsxElement; + + while (current.children.isNotEmpty && current.children.first is JsxElement) { + depth++; + current = current.children.first as JsxElement; + } + + expect(depth, equals(9)); + expect(current.tagName, equals('j')); + expect((current.children.first as JsxText).text, equals('Deep')); + }); + + test('parses fragment with mixed content types', () { + final parser = JsxParser('<>Text {expr}
Element
more text'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final fragment = (result as Success).value as JsxFragment; + expect(fragment.children.length, equals(4)); + + expect(fragment.children[0], isA()); + expect(fragment.children[1], isA()); + expect(fragment.children[2], isA()); + expect(fragment.children[3], isA()); + }); + + test('transforms empty element correctly', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals('\$div()')); + }); + + test('transforms self-closing element with attributes', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'input', + attributes: [ + JsxStringAttribute('type', 'text'), + JsxBooleanAttribute('disabled'), + ], + children: [], + isSelfClosing: true, + ); + + final result = transformer.transform(element); + expect(result, equals("\$input(type: 'text', disabled: true)")); + }); + + test('error message includes position for mismatched closing tag', () { + final parser = JsxParser('
Content
'); + final result = parser.parse(); + + expect(result.isError, isTrue); + final error = (result as Error).error; + expect(error, contains('position')); + }); + + test('parses expression with arrow functions and JSX', () { + final parser = JsxParser('
{() => Content}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, contains('() => Content')); + }); + + test('parses expression with ternary containing JSX', () { + final parser = JsxParser('
{condition ? Yes : No}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, contains('condition ? Yes : No')); + }); + + test('parses self-closing tag without space before slash', () { + final parser = JsxParser(''); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('input')); + expect(element.isSelfClosing, isTrue); + expect(element.children, isEmpty); + }); + + test('parses multiple consecutive expressions', () { + final parser = JsxParser('
{a}{b}{c}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children.length, equals(3)); + expect((element.children[0] as JsxExpression).expression, equals('a')); + expect((element.children[1] as JsxExpression).expression, equals('b')); + expect((element.children[2] as JsxExpression).expression, equals('c')); + }); + + test('parses empty string attribute', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(1)); + final attr = element.attributes.first as JsxStringAttribute; + expect(attr.name, equals('className')); + expect(attr.value, equals('')); + }); + + test('returns error for unclosed expression brace', () { + final parser = JsxParser('
{expr
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, equals('expr')); + }); + + test('parses unicode characters in text content', () { + final parser = JsxParser('
Hello 世界 🌍
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final text = element.children.first as JsxText; + expect(text.text, equals('Hello 世界 🌍')); + }); + + test('parses unicode characters in attribute values', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxStringAttribute; + expect(attr.value, equals('Hello 世界')); + }); + + test('parses self-closing tag with attributes', () { + final parser = JsxParser('Description'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('img')); + expect(element.isSelfClosing, isTrue); + expect(element.attributes.length, equals(2)); + expect((element.attributes[0] as JsxStringAttribute).name, equals('src')); + expect((element.attributes[1] as JsxStringAttribute).name, equals('alt')); + }); + + test('parses very long attribute value', () { + final longValue = 'a' * 1000; + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxStringAttribute; + expect(attr.value, equals(longValue)); + }); + + test('parses element with only whitespace between tags', () { + final parser = JsxParser('
\n\t
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children, isEmpty); + }); + + test('parses deeply nested expressions with multiple brace levels', () { + final parser = JsxParser('
{obj.prop[func({nested: {deep: true}})]}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, contains('obj.prop[func({nested: {deep: true}})]')); + }); + + test('parses multiple spread attributes', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(3)); + expect(element.attributes[0], isA()); + expect(element.attributes[1], isA()); + expect(element.attributes[2], isA()); + }); + + test('parses element with many children (stress test)', () { + final children = List.generate(100, (i) => 'Item $i').join(); + final parser = JsxParser('
$children
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.children.length, equals(100)); + }); + + test('returns error for tag with invalid character in name', () { + final parser = JsxParser('Content'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.tagName, equals('div')); + }); + + test('parses nested fragments correctly', () { + final parser = JsxParser('
<>A<>B
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final div = (result as Success).value as JsxElement; + expect(div.children.length, equals(2)); + expect(div.children[0], isA()); + expect(div.children[1], isA()); + }); + + test('parses attribute with array expression', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.expression, equals('[1, 2, 3]')); + }); + + test('parses attribute with object expression', () { + final parser = JsxParser('
Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final attr = element.attributes.first as JsxExpressionAttribute; + expect(attr.expression, contains('{margin: 10, padding: 20}')); + }); + + test('parses mixed whitespace in attributes', () { + final parser = JsxParser('Text
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + expect(element.attributes.length, equals(2)); + }); + + test('parses expression with string containing JSX-like syntax', () { + final parser = JsxParser('
{"JSX"}
'); + final result = parser.parse(); + + expect(result.isSuccess, isTrue); + final element = (result as Success).value as JsxElement; + final expr = element.children.first as JsxExpression; + expect(expr.expression, equals('"JSX"')); + }); + + test('transforms multiple consecutive expressions correctly', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [ + JsxExpression('a'), + JsxExpression('b'), + JsxExpression('c'), + ], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals('\$div() >> [a, b, c]')); + }); + + test('transforms empty string attribute correctly', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [JsxStringAttribute('className', '')], + children: [JsxText('Text')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div(className: '') >> 'Text'")); + }); + + test('transforms unicode text correctly', () { + final transformer = JsxTransformer(); + final element = JsxElement( + tagName: 'div', + attributes: [], + children: [JsxText('Hello 世界 🌍')], + isSelfClosing: false, + ); + + final result = transformer.transform(element); + expect(result, equals("\$div() >> 'Hello 世界 🌍'")); + }); + + test('parses closing tag with whitespace', () { + final parser = JsxParser('
Content< / div>'); + final result = parser.parse(); + + expect(result.isError, isTrue); + }); + + test('returns error for missing closing bracket on self-closing tag', () { + final parser = JsxParser('
).value as JsxElement; + expect(element.tagName, equals('br')); + }); +} diff --git a/packages/dart_node_react_native/lib/dart_node_react_native.dart b/packages/dart_node_react_native/lib/dart_node_react_native.dart index 1d66b2e..4b4f96f 100644 --- a/packages/dart_node_react_native/lib/dart_node_react_native.dart +++ b/packages/dart_node_react_native/lib/dart_node_react_native.dart @@ -3,4 +3,6 @@ library; export 'src/components.dart'; export 'src/core.dart'; +export 'src/navigation_types.dart'; +export 'src/npm_component.dart'; export 'src/testing.dart'; diff --git a/packages/dart_node_react_native/lib/src/navigation_types.dart b/packages/dart_node_react_native/lib/src/navigation_types.dart new file mode 100644 index 0000000..9c4f194 --- /dev/null +++ b/packages/dart_node_react_native/lib/src/navigation_types.dart @@ -0,0 +1,115 @@ +/// Navigation types for React Navigation interop. +/// +/// These are basic extension types for working with React Navigation +/// props passed to screen components. Use with npmComponent() for +/// direct navigation package usage. +library; + +import 'dart:js_interop'; +import 'dart:js_interop_unsafe'; + +/// Navigation prop type (passed to screen components) +extension type NavigationProp._(JSObject _) implements JSObject { + /// Navigate to a route + void navigate(String routeName, [Map? params]) { + if (params != null) { + _.callMethod('navigate'.toJS, routeName.toJS, params.jsify()); + } else { + _.callMethod('navigate'.toJS, routeName.toJS); + } + } + + /// Go back to the previous screen + void goBack() => _.callMethod('goBack'.toJS); + + /// Push a new screen onto the stack + void push(String routeName, [Map? params]) { + if (params != null) { + _.callMethod('push'.toJS, routeName.toJS, params.jsify()); + } else { + _.callMethod('push'.toJS, routeName.toJS); + } + } + + /// Pop the current screen from the stack + void pop([int? count]) { + if (count != null) { + _.callMethod('pop'.toJS, count.toJS); + } else { + _.callMethod('pop'.toJS); + } + } + + /// Pop to the top of the stack + void popToTop() => _.callMethod('popToTop'.toJS); + + /// Replace the current screen + void replace(String routeName, [Map? params]) { + if (params != null) { + _.callMethod('replace'.toJS, routeName.toJS, params.jsify()); + } else { + _.callMethod('replace'.toJS, routeName.toJS); + } + } + + /// Check if can go back + bool canGoBack() { + final result = _.callMethod('canGoBack'.toJS); + return result?.toDart ?? false; + } + + /// Set navigation options + void setOptions(Map options) => + _.callMethod('setOptions'.toJS, options.jsify()); +} + +/// Route prop type (passed to screen components) +extension type RouteProp._(JSObject _) implements JSObject { + /// Route key + String get key => switch (_['key']) { + final JSString s => s.toDart, + _ => '', + }; + + /// Route name + String get name => switch (_['name']) { + final JSString s => s.toDart, + _ => '', + }; + + /// Route params as JSObject + JSObject? get params => switch (_['params']) { + final JSObject o => o, + _ => null, + }; + + /// Get a typed parameter + T? getParam(String paramKey) { + final p = params; + if (p == null) return null; + final value = p[paramKey]; + if (value == null) return null; + return value.dartify() as T?; + } +} + +/// Screen component props (navigation + route) +typedef ScreenProps = ({ + NavigationProp navigation, + RouteProp route, +}); + +/// Extract ScreenProps from JSObject props passed to screen components. +/// +/// Returns null if props don't contain valid navigation/route objects. +ScreenProps? extractScreenProps(JSObject props) { + final nav = props['navigation']; + final route = props['route']; + return switch ((nav, route)) { + (final JSObject n, final JSObject r) => ( + navigation: NavigationProp._(n), + route: RouteProp._(r), + ), + _ => null, + }; +} diff --git a/packages/dart_node_react_native/lib/src/npm_component.dart b/packages/dart_node_react_native/lib/src/npm_component.dart new file mode 100644 index 0000000..44eea29 --- /dev/null +++ b/packages/dart_node_react_native/lib/src/npm_component.dart @@ -0,0 +1,509 @@ +/// Generic npm React/React Native component wrapper. +/// +/// Provides a flexible way to use ANY npm package's React components +/// without needing to write manual Dart wrappers for each one. +/// +/// ## Basic Usage +/// +/// ```dart +/// // Use any npm component by package name and component name +/// final button = npmComponent( +/// 'react-native-paper', +/// 'Button', +/// props: {'mode': 'contained', 'onPress': handlePress}, +/// child: 'Click Me'.toJS, +/// ); +/// ``` +/// +/// ## Nested Components +/// +/// For components accessed via a namespace (like Stack.Navigator): +/// +/// ```dart +/// final navigator = npmComponent( +/// '@react-navigation/stack', +/// 'createStackNavigator', +/// ); +/// ``` +/// +/// ## Default Exports +/// +/// For packages that use default exports: +/// +/// ```dart +/// final component = npmComponent( +/// 'some-package', +/// 'default', +/// ); +/// ``` +library; + +import 'dart:js_interop'; +import 'dart:js_interop_unsafe'; + +import 'package:dart_node_core/dart_node_core.dart'; +import 'package:dart_node_react/dart_node_react.dart'; +import 'package:nadz/nadz.dart'; + +/// Extension type for npm component elements +extension type NpmComponentElement._(JSObject _) implements ReactElement { + /// Create from a JSObject + factory NpmComponentElement.fromJS(JSObject js) = NpmComponentElement._; +} + +/// Cache for loaded npm modules to avoid repeated require() calls +final Map _moduleCache = {}; + +/// Load an npm module (with caching) +Result loadNpmModule(String packageName) { + // Check cache first + if (_moduleCache.containsKey(packageName)) { + return Success(_moduleCache[packageName]!); + } + + try { + final module = requireModule(packageName); + if (module case final JSObject obj) { + _moduleCache[packageName] = obj; + return Success(obj); + } + return Error('Module $packageName did not return an object'); + } on Object catch (e) { + return Error('Failed to load module $packageName: $e'); + } +} + +/// Get a component from a loaded module. +/// +/// Handles: +/// - Named exports: `module.ComponentName` +/// - Default exports: `module.default` or `module.default.ComponentName` +/// - Nested paths: `module.Stack.Navigator` via dot notation +Result getComponentFromModule( + JSObject module, + String componentPath, +) { + // Handle nested paths like "Stack.Navigator" + final parts = componentPath.split('.'); + JSAny? current = module; + + for (final part in parts) { + if (current == null) { + return Error('Component path $componentPath not found (null at $part)'); + } + + final currentObj = current as JSObject; + + // Try direct access first + final direct = currentObj[part]; + if (direct != null) { + current = direct; + continue; + } + + // For the first part, try via default export + if (part == parts.first) { + final defaultExport = currentObj['default']; + if (defaultExport != null) { + final defaultObj = defaultExport as JSObject; + final viaDefault = defaultObj[part]; + if (viaDefault != null) { + current = viaDefault; + continue; + } + // If asking for 'default' specifically, return the default export + if (part == 'default') { + current = defaultExport; + continue; + } + } + } + + return Error( + 'Component $part not found in module (path: $componentPath)', + ); + } + + return switch (current) { + null => Error('Component $componentPath resolved to null'), + final JSAny c => Success(c), + }; +} + +/// Create a React element from any npm package's component. +/// +/// [packageName] - The npm package name (e.g., 'react-native-paper') +/// [componentPath] - The component name or path +/// (e.g., 'Button' or 'Stack.Navigator') +/// [props] - Optional props map +/// [children] - Optional list of child elements +/// [child] - Optional single child (text or element) +/// +/// Returns [NpmComponentElement] on success, throws [StateError] on failure. +/// +/// ## Examples +/// +/// Basic usage: +/// ```dart +/// final button = npmComponent( +/// 'react-native-paper', +/// 'Button', +/// props: {'mode': 'contained'}, +/// child: 'Click'.toJS, +/// ); +/// ``` +/// +/// With children: +/// ```dart +/// final container = npmComponent( +/// '@react-navigation/native', +/// 'NavigationContainer', +/// children: [navigator], +/// ); +/// ``` +NpmComponentElement npmComponent( + String packageName, + String componentPath, { + Map? props, + List? children, + JSAny? child, +}) { + final moduleResult = loadNpmModule(packageName); + final module = switch (moduleResult) { + Success(:final value) => value, + Error(:final error) => throw StateError(error), + }; + + final componentResult = getComponentFromModule(module, componentPath); + final component = switch (componentResult) { + Success(:final value) => value, + Error(:final error) => throw StateError(error), + }; + + final jsProps = (props != null) ? createProps(props) : null; + + final element = + (children != null && children.isNotEmpty) + ? createElementWithChildren(component, jsProps, children) + : (child != null) + ? createElement(component, jsProps, child) + : createElement(component, jsProps); + + return NpmComponentElement.fromJS(element); +} + +/// Safe version of [npmComponent] that returns a Result instead of throwing. +Result npmComponentSafe( + String packageName, + String componentPath, { + Map? props, + List? children, + JSAny? child, +}) { + final moduleResult = loadNpmModule(packageName); + if (moduleResult case Error(:final error)) { + return Error(error); + } + final module = (moduleResult as Success).value; + + final componentResult = getComponentFromModule(module, componentPath); + if (componentResult case Error(:final error)) { + return Error(error); + } + final component = (componentResult as Success).value; + + try { + final jsProps = (props != null) ? createProps(props) : null; + + final element = + (children != null && children.isNotEmpty) + ? createElementWithChildren(component, jsProps, children) + : (child != null) + ? createElement(component, jsProps, child) + : createElement(component, jsProps); + + return Success(NpmComponentElement.fromJS(element)); + } on Object catch (e) { + return Error('Failed to create element: $e'); + } +} + +/// Call a factory function from an npm module. +/// +/// Useful for packages that export factory functions rather than components, +/// like `createStackNavigator` from @react-navigation/stack. +/// +/// ```dart +/// final stackNav = npmFactory( +/// '@react-navigation/stack', +/// 'createStackNavigator', +/// ); +/// final Stack = stackNav.call(); +/// ``` +Result npmFactory( + String packageName, + String functionPath, +) { + final moduleResult = loadNpmModule(packageName); + if (moduleResult case Error(:final error)) { + return Error(error); + } + final module = (moduleResult as Success).value; + + final componentResult = getComponentFromModule(module, functionPath); + return switch (componentResult) { + Success(:final value) => Success(value as T), + Error(:final error) => Error(error), + }; +} + +/// Clear the module cache. +/// +/// Useful for testing or when you need to force reload modules. +void clearNpmModuleCache() { + _moduleCache.clear(); +} + +/// Check if a module is cached. +bool isModuleCached(String packageName) => + _moduleCache.containsKey(packageName); + +// ============================================================================= +// TYPED EXTENSION TYPES +// ============================================================================= +// Zero-cost wrappers over NpmComponentElement for type safety. +// Use these when you want IDE autocomplete and type checking. +// Start loose with npmComponent(), add types WHERE YOU NEED THEM. + +/// Typed element for Paper Button - zero-cost wrapper +extension type PaperButton._(NpmComponentElement _) implements ReactElement { + /// Create from NpmComponentElement + factory PaperButton._create(NpmComponentElement e) = PaperButton._; +} + +/// Typed element for Paper FAB - zero-cost wrapper +extension type PaperFAB._(NpmComponentElement _) implements ReactElement { + /// Create from NpmComponentElement + factory PaperFAB._create(NpmComponentElement e) = PaperFAB._; +} + +/// Typed element for Paper Card - zero-cost wrapper +extension type PaperCard._(NpmComponentElement _) implements ReactElement { + /// Create from NpmComponentElement + factory PaperCard._create(NpmComponentElement e) = PaperCard._; +} + +/// Typed element for Paper TextInput - zero-cost wrapper +extension type PaperTextInput._(NpmComponentElement _) implements ReactElement { + /// Create from NpmComponentElement + factory PaperTextInput._create(NpmComponentElement e) = PaperTextInput._; +} + +// ============================================================================= +// TYPED PROPS (typedef records) +// ============================================================================= +// Named fields give full IDE autocomplete. Add only the props you use. + +/// Props for Paper Button +typedef PaperButtonProps = ({ + String? mode, // 'text' | 'outlined' | 'contained' | 'elevated' + bool? disabled, + bool? loading, + String? buttonColor, + String? textColor, + Map? style, + Map? contentStyle, + Map? labelStyle, +}); + +/// Props for Paper FAB (Floating Action Button) +typedef PaperFABProps = ({ + String? icon, + String? label, + bool? small, + bool? visible, + bool? loading, + bool? disabled, + String? color, + String? customColor, + Map? style, +}); + +/// Props for Paper Card +typedef PaperCardProps = ({ + String? mode, // 'elevated' | 'outlined' | 'contained' + Map? style, + Map? contentStyle, +}); + +/// Props for Paper TextInput +typedef PaperTextInputProps = ({ + String? label, + String? placeholder, + String? mode, // 'flat' | 'outlined' + bool? disabled, + bool? editable, + bool? secureTextEntry, + String? value, + String? activeOutlineColor, + String? activeUnderlineColor, + String? textColor, + Map? style, +}); + +// ============================================================================= +// TYPED FACTORY FUNCTIONS +// ============================================================================= +// Build props Map and call npmComponent(). Type-safe with autocomplete! + +/// Create a Paper Button with full type safety. +/// +/// ```dart +/// final btn = paperButton( +/// props: (mode: 'contained', disabled: false, loading: null, +/// buttonColor: '#6200EE', textColor: null, style: null, +/// contentStyle: null, labelStyle: null), +/// onPress: () => print('pressed'), +/// label: 'Click Me', +/// ); +/// ``` +PaperButton paperButton({ + PaperButtonProps? props, + void Function()? onPress, + String? label, +}) { + final p = {}; + if (props != null) { + if (props.mode != null) p['mode'] = props.mode; + if (props.disabled != null) p['disabled'] = props.disabled; + if (props.loading != null) p['loading'] = props.loading; + if (props.buttonColor != null) p['buttonColor'] = props.buttonColor; + if (props.textColor != null) p['textColor'] = props.textColor; + if (props.style != null) p['style'] = props.style; + if (props.contentStyle != null) p['contentStyle'] = props.contentStyle; + if (props.labelStyle != null) p['labelStyle'] = props.labelStyle; + } + if (onPress != null) p['onPress'] = onPress; + + return PaperButton._create( + npmComponent( + 'react-native-paper', + 'Button', + props: p.isEmpty ? null : p, + child: label?.toJS, + ), + ); +} + +/// Create a Paper FAB with full type safety. +/// +/// ```dart +/// final fab = paperFAB( +/// props: (icon: 'plus', label: null, small: false, visible: true, +/// loading: null, disabled: null, color: null, +/// customColor: '#6200EE', style: null), +/// onPress: handleAdd, +/// ); +/// ``` +PaperFAB paperFAB({ + PaperFABProps? props, + void Function()? onPress, +}) { + final p = {}; + if (props != null) { + if (props.icon != null) p['icon'] = props.icon; + if (props.label != null) p['label'] = props.label; + if (props.small != null) p['small'] = props.small; + if (props.visible != null) p['visible'] = props.visible; + if (props.loading != null) p['loading'] = props.loading; + if (props.disabled != null) p['disabled'] = props.disabled; + if (props.color != null) p['color'] = props.color; + if (props.customColor != null) p['customColor'] = props.customColor; + if (props.style != null) p['style'] = props.style; + } + if (onPress != null) p['onPress'] = onPress; + + return PaperFAB._create( + npmComponent('react-native-paper', 'FAB', props: p.isEmpty ? null : p), + ); +} + +/// Create a Paper Card with full type safety. +/// +/// ```dart +/// final card = paperCard( +/// props: (mode: 'elevated', style: null, contentStyle: null), +/// children: [cardTitle, cardContent, cardActions], +/// ); +/// ``` +PaperCard paperCard({ + PaperCardProps? props, + void Function()? onPress, + List? children, +}) { + final p = {}; + if (props != null) { + if (props.mode != null) p['mode'] = props.mode; + if (props.style != null) p['style'] = props.style; + if (props.contentStyle != null) p['contentStyle'] = props.contentStyle; + } + if (onPress != null) p['onPress'] = onPress; + + return PaperCard._create( + npmComponent( + 'react-native-paper', + 'Card', + props: p.isEmpty ? null : p, + children: children, + ), + ); +} + +/// Create a Paper TextInput with full type safety. +/// +/// ```dart +/// final input = paperTextInput( +/// props: (label: 'Email', placeholder: 'Enter email', +/// mode: 'outlined', disabled: null, editable: null, +/// secureTextEntry: null, value: null, +/// activeOutlineColor: '#6200EE', +/// activeUnderlineColor: null, textColor: null, style: null), +/// onChangeText: (text) => setState(text), +/// ); +/// ``` +PaperTextInput paperTextInput({ + PaperTextInputProps? props, + void Function(String)? onChangeText, + String? value, +}) { + final p = {}; + if (props != null) { + if (props.label != null) p['label'] = props.label; + if (props.placeholder != null) p['placeholder'] = props.placeholder; + if (props.mode != null) p['mode'] = props.mode; + if (props.disabled != null) p['disabled'] = props.disabled; + if (props.editable != null) p['editable'] = props.editable; + if (props.secureTextEntry != null) { + p['secureTextEntry'] = props.secureTextEntry; + } + if (props.value != null) p['value'] = props.value; + if (props.activeOutlineColor != null) { + p['activeOutlineColor'] = props.activeOutlineColor; + } + if (props.activeUnderlineColor != null) { + p['activeUnderlineColor'] = props.activeUnderlineColor; + } + if (props.textColor != null) p['textColor'] = props.textColor; + if (props.style != null) p['style'] = props.style; + } + if (onChangeText != null) p['onChangeText'] = onChangeText; + if (value != null) p['value'] = value; + + return PaperTextInput._create( + npmComponent( + 'react-native-paper', + 'TextInput', + props: p.isEmpty ? null : p, + ), + ); +} diff --git a/packages/dart_node_react_native/pubspec.lock b/packages/dart_node_react_native/pubspec.lock index bd25e43..33dcb9c 100644 --- a/packages/dart_node_react_native/pubspec.lock +++ b/packages/dart_node_react_native/pubspec.lock @@ -102,7 +102,7 @@ packages: path: "../dart_node_coverage" relative: true source: path - version: "0.1.0" + version: "0.9.0-beta" dart_node_react: dependency: "direct main" description: diff --git a/packages/dart_node_react_native/test/npm_component_test.dart b/packages/dart_node_react_native/test/npm_component_test.dart new file mode 100644 index 0000000..d59abe9 --- /dev/null +++ b/packages/dart_node_react_native/test/npm_component_test.dart @@ -0,0 +1,168 @@ +/// Tests proving npmComponent() can use ANY npm package directly. +/// +/// These tests demonstrate that we can drop npm packages right in +/// and use them exactly like TypeScript - no wrapper code needed! +@TestOn('js') +library; + +import 'dart:js_interop'; + +import 'package:dart_node_react/dart_node_react.dart'; +import 'package:dart_node_react_native/dart_node_react_native.dart'; +import 'package:nadz/nadz.dart'; +import 'package:test/test.dart'; + +void main() { + test('loadNpmModule loads react successfully', () { + final result = loadNpmModule('react'); + expect(result.isSuccess, isTrue); + }); + + test('loadNpmModule loads react-native successfully', () { + final result = loadNpmModule('react-native'); + expect(result.isSuccess, isTrue); + }); + + test('loadNpmModule caches modules', () { + clearNpmModuleCache(); + expect(isModuleCached('react'), isFalse); + + loadNpmModule('react'); + expect(isModuleCached('react'), isTrue); + + // Second call uses cache + final result2 = loadNpmModule('react'); + expect(result2.isSuccess, isTrue); + }); + + test('loadNpmModule returns error for nonexistent package', () { + final result = loadNpmModule('nonexistent-package-xyz-123'); + expect(result.isSuccess, isFalse); + }); + + test('getComponentFromModule gets View from react-native', () { + final moduleResult = loadNpmModule('react-native'); + final module = switch (moduleResult) { + Success(:final value) => value, + Error(:final error) => throw StateError(error), + }; + + final viewResult = getComponentFromModule(module, 'View'); + expect(viewResult.isSuccess, isTrue); + }); + + test('getComponentFromModule gets Text from react-native', () { + final moduleResult = loadNpmModule('react-native'); + final module = switch (moduleResult) { + Success(:final value) => value, + Error(:final error) => throw StateError(error), + }; + + final textResult = getComponentFromModule(module, 'Text'); + expect(textResult.isSuccess, isTrue); + }); + + test('getComponentFromModule returns error for nonexistent component', () { + final moduleResult = loadNpmModule('react-native'); + final module = switch (moduleResult) { + Success(:final value) => value, + Error(:final error) => throw StateError(error), + }; + + final result = getComponentFromModule(module, 'NonExistentComponent'); + expect(result.isSuccess, isFalse); + }); + + test('npmComponent creates View element from react-native', () { + final element = npmComponent( + 'react-native', + 'View', + props: {'style': {'flex': 1}}, + ); + expect(element, isNotNull); + }); + + test('npmComponent creates Text element with child', () { + final element = npmComponent( + 'react-native', + 'Text', + child: 'Hello World'.toJS, + ); + expect(element, isNotNull); + }); + + test('npmComponent creates element with children list', () { + final child1 = npmComponent('react-native', 'Text', child: 'One'.toJS); + final child2 = npmComponent('react-native', 'Text', child: 'Two'.toJS); + + final parent = npmComponent( + 'react-native', + 'View', + children: [child1, child2], + ); + expect(parent, isNotNull); + }); + + test('npmComponentSafe returns Success for valid component', () { + final result = npmComponentSafe( + 'react-native', + 'View', + props: {'testID': 'test-view'}, + ); + expect(result.isSuccess, isTrue); + }); + + test('npmComponentSafe returns Error for invalid package', () { + final result = npmComponentSafe( + 'nonexistent-package-xyz', + 'Component', + ); + expect(result.isSuccess, isFalse); + }); + + test('npmFactory gets createElement from react', () { + final result = npmFactory('react', 'createElement'); + expect(result.isSuccess, isTrue); + }); + + test('clearNpmModuleCache clears all cached modules', () { + loadNpmModule('react'); + expect(isModuleCached('react'), isTrue); + + clearNpmModuleCache(); + expect(isModuleCached('react'), isFalse); + }); + + test('npmComponent works with nested props', () { + final element = npmComponent( + 'react-native', + 'View', + props: { + 'style': { + 'flex': 1, + 'backgroundColor': '#FFFFFF', + 'padding': 16, + 'margin': {'top': 10, 'bottom': 10}, + }, + 'testID': 'nested-props-view', + }, + ); + expect(element, isNotNull); + }); + + test('npmComponent works with callback props', () { + final element = npmComponent( + 'react-native', + 'TouchableOpacity', + props: {'onPress': () {}}, + children: [npmComponent('react-native', 'Text', child: 'Press'.toJS)], + ); + expect(element, isNotNull); + }); + + test('NpmComponentElement implements ReactElement', () { + final element = npmComponent('react-native', 'View'); + // NpmComponentElement should be usable as ReactElement + expect(element, isA()); + }); +} diff --git a/packages/dart_node_react_native/test/react_native_test.dart b/packages/dart_node_react_native/test/react_native_test.dart index a45328d..e3de789 100644 --- a/packages/dart_node_react_native/test/react_native_test.dart +++ b/packages/dart_node_react_native/test/react_native_test.dart @@ -2,10 +2,55 @@ /// Actual React Native runtime requires Expo/RN environment. library; +import 'dart:js_interop'; + import 'package:dart_node_coverage/dart_node_coverage.dart'; +import 'package:dart_node_react/dart_node_react.dart' show ReactElement; import 'package:dart_node_react_native/dart_node_react_native.dart'; import 'package:test/test.dart'; +// ============================================================================= +// TYPED WRAPPER PATTERN - demonstrates the pattern from NPM_USAGE.md +// ============================================================================= + +/// Step 1: Extension type - zero-cost wrapper over NpmComponentElement +extension type TestPaperButton._(NpmComponentElement _) + implements ReactElement { + factory TestPaperButton._create(NpmComponentElement e) = TestPaperButton._; +} + +/// Step 2: Props typedef - named record with typed props +typedef TestPaperButtonProps = ({ + String? mode, + bool? disabled, + bool? loading, + String? buttonColor, +}); + +/// Step 3: Factory function - builds props Map and calls npmComponent +TestPaperButton testPaperButton({ + TestPaperButtonProps? props, + void Function()? onPress, + String? label, +}) { + final p = {}; + if (props != null) { + if (props.mode != null) p['mode'] = props.mode; + if (props.disabled != null) p['disabled'] = props.disabled; + if (props.loading != null) p['loading'] = props.loading; + if (props.buttonColor != null) p['buttonColor'] = props.buttonColor; + } + if (onPress != null) p['onPress'] = onPress; + + return TestPaperButton._create( + npmComponent('react-native-paper', 'Button', props: p, child: label?.toJS), + ); +} + +// ============================================================================= +// END TYPED WRAPPER PATTERN +// ============================================================================= + void main() { setUp(initCoverage); tearDownAll(() => writeCoverageFile('coverage/coverage.json')); @@ -181,4 +226,377 @@ void main() { expect(reg, isNull); }); }); + + group('npm component - direct usage API', () { + test('loadNpmModule function exists', () { + expect(loadNpmModule, isA()); + }); + + test('getComponentFromModule function exists', () { + expect(getComponentFromModule, isA()); + }); + + test('npmComponent function exists', () { + expect(npmComponent, isA()); + }); + + test('npmComponentSafe function exists', () { + expect(npmComponentSafe, isA()); + }); + + test('npmFactory function exists', () { + expect(npmFactory, isA()); + }); + + test('clearNpmModuleCache function exists', () { + expect(clearNpmModuleCache, isA()); + }); + + test('isModuleCached function exists', () { + expect(isModuleCached, isA()); + }); + + test('NpmComponentElement type exists', () { + NpmComponentElement? element; + expect(element, isNull); + }); + }); + + group('typed extension types - type safety', () { + // These tests verify type hierarchy at compile-time + // The type assignments would fail compilation if types were wrong + test('NpmComponentElement implements ReactElement', () { + // Compile-time proof: can assign to ReactElement variable + const NpmComponentElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNViewElement implements ReactElement', () { + const RNViewElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNTextElement implements ReactElement', () { + const RNTextElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNTextInputElement implements ReactElement', () { + const RNTextInputElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNTouchableOpacityElement implements ReactElement', () { + const RNTouchableOpacityElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNButtonElement implements ReactElement', () { + const RNButtonElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNScrollViewElement implements ReactElement', () { + const RNScrollViewElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNSafeAreaViewElement implements ReactElement', () { + const RNSafeAreaViewElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNActivityIndicatorElement implements ReactElement', () { + const RNActivityIndicatorElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNFlatListElement implements ReactElement', () { + const RNFlatListElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNImageElement implements ReactElement', () { + const RNImageElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('RNSwitchElement implements ReactElement', () { + const RNSwitchElement? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('typed elements assignable to List', () { + // Compile-time: typed elements can be added to ReactElement list + final elements = []; + expect(elements, isEmpty); + }); + }); + + group('navigation types - type safety', () { + test('NavigationProp type exists', () { + NavigationProp? nav; + expect(nav, isNull); + }); + + test('RouteProp type exists', () { + RouteProp? route; + expect(route, isNull); + }); + + test('ScreenProps typedef exists', () { + ScreenProps? props; + expect(props, isNull); + }); + + test('extractScreenProps function exists', () { + expect(extractScreenProps, isA()); + }); + }); + + group('builder functions return typed elements', () { + test('view returns RNViewElement', () { + // Compile-time type check proves return type + expect(view, isA()); + }); + + test('text returns RNTextElement', () { + expect(text, isA()); + }); + + test('textInput returns RNTextInputElement', () { + expect(textInput, isA()); + }); + + test('touchableOpacity returns RNTouchableOpacityElement', () { + expect(touchableOpacity, isA()); + }); + + test('rnButton returns RNButtonElement', () { + expect(rnButton, isA()); + }); + + test('scrollView returns RNScrollViewElement', () { + expect(scrollView, isA()); + }); + + test('safeAreaView returns RNSafeAreaViewElement', () { + expect(safeAreaView, isA()); + }); + + test('activityIndicator returns RNActivityIndicatorElement', () { + expect(activityIndicator, isA()); + }); + + test('rnImage returns RNImageElement', () { + expect(rnImage, isA()); + }); + + test('rnSwitch returns RNSwitchElement', () { + expect(rnSwitch, isA()); + }); + }); + + group('npmComponent type safety', () { + test('npmComponent returns NpmComponentElement not raw JSObject', () { + // Type safety: npmComponent returns NpmComponentElement, not JSObject + expect(npmComponent, isA()); + }); + + test('npmComponentSafe returns Result with typed element', () { + // Type safety: returns Result + expect(npmComponentSafe, isA()); + }); + + test('npmFactory returns typed Result', () { + // Type safety: generic T extends JSAny + expect(npmFactory, isA()); + }); + }); + + group('typed wrapper pattern - extension type + props typedef + factory', () { + // Tests the pattern from NPM_USAGE.md "Adding Your Own Types" section + test('extension type wraps NpmComponentElement', () { + // TestPaperButton extends NpmComponentElement -> ReactElement + // This compiles proving the type hierarchy is correct + const TestPaperButton? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('props typedef provides named record fields', () { + // Create a typed props record - compile-time type checking + const TestPaperButtonProps props = ( + mode: 'contained', + disabled: false, + loading: null, + buttonColor: '#6200EE', + ); + expect(props.mode, equals('contained')); + expect(props.disabled, isFalse); + expect(props.loading, isNull); + expect(props.buttonColor, equals('#6200EE')); + }); + + test('props typedef allows all null values', () { + const TestPaperButtonProps props = ( + mode: null, + disabled: null, + loading: null, + buttonColor: null, + ); + expect(props.mode, isNull); + expect(props.disabled, isNull); + }); + + test('factory function exists and returns typed element', () { + // The factory function signature proves type safety + expect(testPaperButton, isA()); + }); + + test('factory function return type is ReactElement subtype', () { + // TestPaperButton can be assigned to ReactElement + // Type annotation proves the function signature matches + expect(testPaperButton, isA()); + }); + + test('typed wrapper pattern provides full type safety', () { + // The 3-part pattern: + // 1. Extension type (TestPaperButton) - zero-cost typed wrapper + // 2. Props typedef (TestPaperButtonProps) - named record + // 3. Factory function (testPaperButton) - typed constructor + // + // This proves types work over raw JS without JSObject exposure + expect(testPaperButton, isA()); + + // Props record gives autocomplete + const props = ( + mode: 'outlined', + disabled: true, + loading: false, + buttonColor: null, + ); + expect(props.mode, equals('outlined')); + }); + }); + + group('Paper typed extension types - from npm_component.dart', () { + // Tests for REAL Paper typed wrappers added by Roger3 + test('PaperButton implements ReactElement', () { + const PaperButton? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('PaperFAB implements ReactElement', () { + const PaperFAB? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('PaperCard implements ReactElement', () { + const PaperCard? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('PaperTextInput implements ReactElement', () { + const PaperTextInput? element = null; + const ReactElement? asReact = element; + expect(asReact, isNull); + }); + + test('paperButton factory function exists', () { + expect(paperButton, isA()); + }); + + test('paperFAB factory function exists', () { + expect(paperFAB, isA()); + }); + + test('paperCard factory function exists', () { + expect(paperCard, isA()); + }); + + test('paperTextInput factory function exists', () { + expect(paperTextInput, isA()); + }); + }); + + group('Paper props typedef records - type safety', () { + test('PaperButtonProps has all fields', () { + const PaperButtonProps props = ( + mode: 'contained', + disabled: false, + loading: true, + buttonColor: '#6200EE', + textColor: '#FFFFFF', + style: null, + contentStyle: null, + labelStyle: null, + ); + expect(props.mode, equals('contained')); + expect(props.disabled, isFalse); + expect(props.loading, isTrue); + expect(props.buttonColor, equals('#6200EE')); + }); + + test('PaperFABProps has all fields', () { + const PaperFABProps props = ( + icon: 'plus', + label: 'Add', + small: true, + visible: true, + loading: false, + disabled: false, + color: '#6200EE', + customColor: null, + style: null, + ); + expect(props.icon, equals('plus')); + expect(props.label, equals('Add')); + expect(props.small, isTrue); + }); + + test('PaperCardProps has all fields', () { + const PaperCardProps props = ( + mode: 'elevated', + style: null, + contentStyle: null, + ); + expect(props.mode, equals('elevated')); + }); + + test('PaperTextInputProps has all fields', () { + const PaperTextInputProps props = ( + label: 'Email', + placeholder: 'Enter email', + mode: 'outlined', + disabled: false, + editable: true, + secureTextEntry: false, + value: 'test@test.com', + activeOutlineColor: '#6200EE', + activeUnderlineColor: null, + textColor: '#000000', + style: null, + ); + expect(props.label, equals('Email')); + expect(props.placeholder, equals('Enter email')); + expect(props.mode, equals('outlined')); + expect(props.value, equals('test@test.com')); + }); + }); } diff --git a/tools/build/build.dart b/tools/build/build.dart index 9a504ec..0fa5ae1 100644 --- a/tools/build/build.dart +++ b/tools/build/build.dart @@ -187,7 +187,11 @@ String? _searchEntryPoints(String exampleDir, List remaining) { ); } - return _compileToJs(exampleDir, entryPoint, target, buildDir); + // Transpile JSX files before compilation + final jsxResult = _transpileJsxFiles(exampleDir); + return !jsxResult.isSuccess + ? jsxResult + : _compileToJs(exampleDir, entryPoint, target, buildDir); } ({bool isSuccess, String message}) _compileToJs( @@ -248,3 +252,45 @@ String? _searchEntryPoints(String exampleDir, List remaining) { print(' Build complete: $finalOutput'); return (isSuccess: true, message: 'Build successful'); } + +({bool isSuccess, String message}) _transpileJsxFiles(String exampleDir) { + final dir = Directory(exampleDir); + final jsxFiles = dir + .listSync(recursive: true) + .whereType() + .where((f) => f.path.endsWith('.jsx')) + .toList(); + + final hasJsxFiles = jsxFiles.isNotEmpty; + if (!hasJsxFiles) { + return (isSuccess: true, message: 'No JSX files to transpile'); + } + + print(' Transpiling ${jsxFiles.length} JSX file(s)...'); + + for (final file in jsxFiles) { + final result = _transpileJsxFile(file.path); + if (!result.isSuccess) return result; + } + + return (isSuccess: true, message: 'JSX transpilation complete'); +} + +({bool isSuccess, String message}) _transpileJsxFile(String inputPath) { + final outputPath = inputPath.replaceAll('.jsx', '.g.dart'); + final projectRoot = Directory.current.path; + + final result = Process.runSync('dart', [ + 'run', + '$projectRoot/packages/dart_jsx/bin/jsx.dart', + inputPath, + outputPath, + ]); + + return result.exitCode != 0 + ? ( + isSuccess: false, + message: 'JSX transpilation failed for $inputPath:\n${result.stderr}', + ) + : (isSuccess: true, message: 'Transpiled $inputPath'); +} From a28ed577e138bd5044a0e769c07756a94a4b4bd1 Mon Sep 17 00:00:00 2001 From: Christian Findlay <16697547+MelbourneDeveloper@users.noreply.github.com> Date: Sun, 14 Dec 2025 09:07:34 +1100 Subject: [PATCH 02/26] Version the package --- examples/too_many_cooks_vscode_extension/package-lock.json | 4 ++-- examples/too_many_cooks_vscode_extension/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/too_many_cooks_vscode_extension/package-lock.json b/examples/too_many_cooks_vscode_extension/package-lock.json index 108caee..a97a33c 100644 --- a/examples/too_many_cooks_vscode_extension/package-lock.json +++ b/examples/too_many_cooks_vscode_extension/package-lock.json @@ -1,12 +1,12 @@ { "name": "too-many-cooks", - "version": "0.2.0", + "version": "0.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "too-many-cooks", - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "dependencies": { "@preact/signals-core": "^1.5.0" diff --git a/examples/too_many_cooks_vscode_extension/package.json b/examples/too_many_cooks_vscode_extension/package.json index 8961362..1a924ea 100644 --- a/examples/too_many_cooks_vscode_extension/package.json +++ b/examples/too_many_cooks_vscode_extension/package.json @@ -2,7 +2,7 @@ "name": "too-many-cooks", "displayName": "Too Many Cooks", "description": "Visualize multi-agent coordination - see file locks, messages, and plans across AI agents working on your codebase", - "version": "0.2.0", + "version": "0.3.0", "publisher": "Nimblesite", "license": "MIT", "icon": "media/icons/chef-128.png", From 6db5b1869f9660c29107e9300c37dbe468372f4a Mon Sep 17 00:00:00 2001 From: Christian Findlay <16697547+MelbourneDeveloper@users.noreply.github.com> Date: Sun, 14 Dec 2025 09:29:29 +1100 Subject: [PATCH 03/26] transpiler test fixes --- CLAUDE.md | 1 + examples/too_many_cooks/lib/src/db/db.dart | 48 +++++++- .../src/ui/tree/messagesTreeProvider.ts | 100 +++------------ packages/dart_jsx/lib/src/parser.dart | 23 +++- packages/dart_jsx/test/transpiler_test.dart | 13 +- .../dart_node_react_native/package-lock.json | 21 ++++ packages/dart_node_react_native/package.json | 5 + .../test/npm_component_test.dart | 116 ++---------------- 8 files changed, 120 insertions(+), 207 deletions(-) create mode 100644 packages/dart_node_react_native/package-lock.json create mode 100644 packages/dart_node_react_native/package.json diff --git a/CLAUDE.md b/CLAUDE.md index cf9915b..8ea0c5e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -3,6 +3,7 @@ Dart packages for building Node.js apps. Typed Dart layer over JS interop. ## Multi-Agent Coordination (Too Many Cooks) +- Keep your key! It's critical. Do not lose it! - Check messages regularly, lock files before editing, unlock after - Don't edit locked files; signal intent via plans and messages - Coordinator: keep delegating via messages. Worker: keep asking for tasks via messages diff --git a/examples/too_many_cooks/lib/src/db/db.dart b/examples/too_many_cooks/lib/src/db/db.dart index a7979e0..de9f529 100644 --- a/examples/too_many_cooks/lib/src/db/db.dart +++ b/examples/too_many_cooks/lib/src/db/db.dart @@ -630,8 +630,8 @@ ORDER BY created_at DESC'''; final stmtResult = db.prepare(sql); return switch (stmtResult) { Success(:final value) => switch (value.all([agentName])) { - Success(:final value) => Success( - value + Success(:final value) => () { + final messageList = value .map( (r) => ( id: r['id']! as String, @@ -642,14 +642,52 @@ ORDER BY created_at DESC'''; readAt: r['read_at'] as int?, ), ) - .toList(), + .toList(); + // Auto-mark fetched messages as read (agent proved identity with key) + _autoMarkRead(db, log, agentName, messageList); + return Success, DbError>(messageList); + }(), + Error(:final error) => Error, DbError>( + (code: errDatabase, message: error), ), - Error(:final error) => Error((code: errDatabase, message: error)), }, - Error(:final error) => Error((code: errDatabase, message: error)), + Error(:final error) => Error, DbError>( + (code: errDatabase, message: error), + ), }; } +void _autoMarkRead( + Database db, + Logger log, + String agentName, + List messageList, +) { + final unreadIds = messageList + .where((m) => m.readAt == null) + .map((m) => m.id) + .toList(); + if (unreadIds.isEmpty) return; + + final now = _now(); + final stmtResult = db.prepare(''' + UPDATE messages SET read_at = ? + WHERE id = ? AND (to_agent = ? OR to_agent = '*') AND read_at IS NULL + '''); + if (stmtResult case Error(:final error)) { + log.warn('Failed to auto-mark messages read: $error'); + return; + } + final stmt = (stmtResult as Success).value; + for (final id in unreadIds) { + final result = stmt.run([now, id, agentName]); + if (result case Error(:final error)) { + log.warn('Failed to mark message $id as read: $error'); + } + } + log.debug('Auto-marked ${unreadIds.length} messages as read for $agentName'); +} + Result _markRead( Database db, Logger log, diff --git a/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts b/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts index 7f882ee..e7e44e1 100644 --- a/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts +++ b/examples/too_many_cooks_vscode_extension/src/ui/tree/messagesTreeProvider.ts @@ -12,33 +12,30 @@ export class MessageTreeItem extends vscode.TreeItem { label: string, description: string | undefined, collapsibleState: vscode.TreeItemCollapsibleState, - public readonly message?: Message, - public readonly isDetail?: boolean + public readonly message?: Message ) { super(label, collapsibleState); this.description = description; this.iconPath = this.getIcon(); this.contextValue = message ? 'message' : undefined; - if (message && !isDetail) { + if (message) { this.tooltip = this.createTooltip(message); } } - private getIcon(): vscode.ThemeIcon { + private getIcon(): vscode.ThemeIcon | undefined { if (!this.message) { return new vscode.ThemeIcon('mail'); } - if (this.message.toAgent === '*') { - return new vscode.ThemeIcon('broadcast'); - } + // Status icon: unread = yellow circle, read = none if (this.message.readAt === undefined) { return new vscode.ThemeIcon( - 'mail-read', + 'circle-filled', new vscode.ThemeColor('charts.yellow') ); } - return new vscode.ThemeIcon('mail'); + return undefined; } private createTooltip(msg: Message): vscode.MarkdownString { @@ -112,9 +109,9 @@ export class MessagesTreeProvider } getChildren(element?: MessageTreeItem): MessageTreeItem[] { - // If expanding a message, show its details - if (element?.message) { - return this.createMessageDetails(element.message); + // No children - flat list + if (element) { + return []; } const allMessages = messages.value; @@ -134,85 +131,20 @@ export class MessagesTreeProvider (a, b) => b.createdAt - a.createdAt ); + // Single row per message: "from → to | time | content" return sorted.map((msg) => { - const isBroadcast = msg.toAgent === '*'; - const target = isBroadcast ? 'all' : msg.toAgent; + const target = msg.toAgent === '*' ? 'all' : msg.toAgent; const relativeTime = this.getRelativeTime(msg.createdAt); - const preview = - msg.content.length > 25 - ? msg.content.substring(0, 25) + '...' - : msg.content; + const status = msg.readAt === undefined ? 'unread' : ''; + const statusPart = status ? ` [${status}]` : ''; return new MessageTreeItem( - `${msg.fromAgent} → ${target}`, - `${relativeTime} | ${preview}`, - vscode.TreeItemCollapsibleState.Collapsed, - msg - ); - }); - } - - private createMessageDetails(msg: Message): MessageTreeItem[] { - const details: MessageTreeItem[] = []; - const sentDate = new Date(msg.createdAt); - - // Full content (may span multiple lines) - details.push( - new MessageTreeItem( - '📝 Content', + `${msg.fromAgent} → ${target} | ${relativeTime}${statusPart}`, msg.content, vscode.TreeItemCollapsibleState.None, - msg, - true - ) - ); - - // Timestamps - details.push( - new MessageTreeItem( - '📅 Sent', - sentDate.toLocaleString(), - vscode.TreeItemCollapsibleState.None, - msg, - true - ) - ); - - if (msg.readAt) { - const readDate = new Date(msg.readAt); - details.push( - new MessageTreeItem( - '✅ Read', - readDate.toLocaleString(), - vscode.TreeItemCollapsibleState.None, - msg, - true - ) - ); - } else { - details.push( - new MessageTreeItem( - '⏳ Status', - 'Unread', - vscode.TreeItemCollapsibleState.None, - msg, - true - ) + msg ); - } - - // Message ID - details.push( - new MessageTreeItem( - '🔑 ID', - msg.id, - vscode.TreeItemCollapsibleState.None, - msg, - true - ) - ); - - return details; + }); } private getRelativeTime(timestamp: number): string { diff --git a/packages/dart_jsx/lib/src/parser.dart b/packages/dart_jsx/lib/src/parser.dart index 252c7ae..77199a8 100644 --- a/packages/dart_jsx/lib/src/parser.dart +++ b/packages/dart_jsx/lib/src/parser.dart @@ -115,7 +115,7 @@ class JsxParser { final String _source; int _pos = 0; - String get _remaining => _source.substring(_pos); + String get _remaining => _pos >= _source.length ? '' : _source.substring(_pos); bool get _isEof => _pos >= _source.length; String get _currentChar => _isEof ? '' : _source[_pos]; @@ -245,9 +245,10 @@ class JsxParser { final attrs = []; while (!_isEof && _currentChar != '>' && !_remaining.startsWith('/>')) { _skipWhitespace(); - final result = _shouldParseAttribute() - ? _parseAttribute() - : Success(null); + if (!_shouldParseAttribute()) break; + + final posBefore = _pos; + final result = _parseAttribute(); final shouldContinue = result.match( onSuccess: (attr) { @@ -259,6 +260,11 @@ class JsxParser { if (!shouldContinue) { return result.match(onSuccess: (_) => Success(attrs), onError: Error.new); } + + // Detect infinite loop - invalid char that can't be parsed + if (_pos == posBefore) { + return Error('Unexpected character "$_currentChar" at position $_pos'); + } } return Success(attrs); } @@ -278,6 +284,9 @@ class JsxParser { Result _parseSpreadAttribute() { _pos += 4; // consume '{...' final expr = _parseBalancedExpression('}'); + if (_isEof || _currentChar != '}') { + return Error('Unclosed spread attribute at position $_pos'); + } _pos++; // consume '}' return Success(JsxSpreadAttribute(expr)); } @@ -324,6 +333,9 @@ class JsxParser { Result _parseExpressionAttribute(String name) { _pos++; // consume '{' final expr = _parseBalancedExpression('}'); + if (_isEof || _currentChar != '}') { + return Error('Unclosed expression in attribute $name at position $_pos'); + } _pos++; // consume '}' return Success(JsxExpressionAttribute(name, expr)); } @@ -358,6 +370,9 @@ class JsxParser { Result _parseExpressionNode() { _pos++; // consume '{' final expr = _parseBalancedExpression('}'); + if (_isEof || _currentChar != '}') { + return Error('Unclosed expression at position $_pos'); + } _pos++; // consume '}' return Success(JsxExpression(expr.trim())); } diff --git a/packages/dart_jsx/test/transpiler_test.dart b/packages/dart_jsx/test/transpiler_test.dart index 8ecbfca..8cb2b55 100644 --- a/packages/dart_jsx/test/transpiler_test.dart +++ b/packages/dart_jsx/test/transpiler_test.dart @@ -1242,10 +1242,7 @@ final nav =