From 37aad85e5f2c75015b2b0f4fd276b35756c69d16 Mon Sep 17 00:00:00 2001
From: Tobe O <thosakwe@gmail.com>
Date: Sat, 23 Mar 2019 18:02:57 -0400
Subject: [PATCH] Allow nesting classes in render

---
 jael_web/example/stateful.dart           |  2 +-
 jael_web/example/using_components.dart   | 25 +++++++++++++++++
 jael_web/example/using_components.g.dart | 35 ++++++++++++++++++++++++
 jael_web/lib/src/builder/builder.dart    | 18 ++++++++----
 jael_web/lib/src/component.dart          |  2 +-
 5 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 jael_web/example/using_components.dart
 create mode 100644 jael_web/example/using_components.g.dart

diff --git a/jael_web/example/stateful.dart b/jael_web/example/stateful.dart
index 664a1fe0..f2190320 100644
--- a/jael_web/example/stateful.dart
+++ b/jael_web/example/stateful.dart
@@ -14,7 +14,7 @@ class _AppState {
   }
 }
 
-@Dsx(template: '<div>Tick count: {state.ticks}</div>')
+@Jael(template: '<div>Tick count: {{state.ticks}}</div>')
 class StatefulApp extends Component<_AppState> with _StatefulAppJaelTemplate {
   Timer _timer;
 
diff --git a/jael_web/example/using_components.dart b/jael_web/example/using_components.dart
new file mode 100644
index 00000000..50ccbfa5
--- /dev/null
+++ b/jael_web/example/using_components.dart
@@ -0,0 +1,25 @@
+import 'package:jael_web/jael_web.dart';
+part 'using_components.g.dart';
+
+@Jael(template: '''
+<div>
+  <h1>Welcome to my app</h1>
+  <LabeledInput name="username" />
+</div>
+''')
+class MyApp extends Component with _MyAppJaelTemplate {}
+
+@Jael(template: '''
+<div>
+  <label>
+    <b>{{name}}:</b>
+  </label>
+  <br>
+  <input name=name placeholder="Enter " + name + "..." type="text">
+</div>
+''')
+class LabeledInput extends Component with _LabeledInputJaelTemplate {
+  final String name;
+
+  LabeledInput({this.name});
+}
diff --git a/jael_web/example/using_components.g.dart b/jael_web/example/using_components.g.dart
new file mode 100644
index 00000000..43a16ceb
--- /dev/null
+++ b/jael_web/example/using_components.g.dart
@@ -0,0 +1,35 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'using_components.dart';
+
+// **************************************************************************
+// JaelComponentGenerator
+// **************************************************************************
+
+abstract class _MyAppJaelTemplate implements Component<dynamic> {
+  @override
+  DomNode render() {
+    return h('div', {}, [
+      h('h1', {}, [text('Welcome to my app')]),
+      LabeledInput(name: "username")
+    ]);
+  }
+}
+
+abstract class _LabeledInputJaelTemplate implements Component<dynamic> {
+  String get name;
+  @override
+  DomNode render() {
+    return h('div', {}, [
+      h('label', {}, [
+        h('b', {}, [text(name.toString()), text(':')])
+      ]),
+      h('br', {}, []),
+      h('input', {
+        'name': name,
+        'placeholder': "Enter " + name + "...",
+        'type': "text"
+      }, [])
+    ]);
+  }
+}
diff --git a/jael_web/lib/src/builder/builder.dart b/jael_web/lib/src/builder/builder.dart
index a75a3e57..618909c7 100644
--- a/jael_web/lib/src/builder/builder.dart
+++ b/jael_web/lib/src/builder/builder.dart
@@ -9,6 +9,8 @@ import 'package:path/path.dart' as p;
 import 'package:source_gen/source_gen.dart';
 import 'util.dart';
 
+var _upper = RegExp(r'^[A-Z]');
+
 Builder jaelComponentBuilder(_) {
   return SharedPartBuilder([JaelComponentGenerator()], 'jael_web_cmp');
 }
@@ -124,11 +126,17 @@ class JaelComponentGenerator extends GeneratorForAnnotation<Jael> {
             : CodeExpression(Code(attr.value.span.text));
       }
 
-      return refer('h').call([
-        literalString(child.tagName.name),
-        literalMap(attrs),
-        literalList(child.children.map(compileElementChild)),
-      ]);
+      var tagName = child.tagName.name;
+      if (!_upper.hasMatch(tagName)) {
+        return refer('h').call([
+          literalString(tagName),
+          literalMap(attrs),
+          literalList(child.children.map(compileElementChild)),
+        ]);
+      } else {
+        // TODO: How to pass children?
+        return refer(tagName).newInstance([], attrs);
+      }
       // return refer(child.tagName.name).newInstance([]);
     } else {
       throw 'Unsupported: $child';
diff --git a/jael_web/lib/src/component.dart b/jael_web/lib/src/component.dart
index 4c55336e..4faf6901 100644
--- a/jael_web/lib/src/component.dart
+++ b/jael_web/lib/src/component.dart
@@ -1,6 +1,6 @@
 import 'dom_node.dart';
 
-abstract class Component<State> {
+abstract class Component<State> extends DomNode {
   State state;
 
   DomNode render();