Allow nesting classes in render

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;
 

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});
+}

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"
+      }, [])
+    ]);
+  }
+}

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';

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();