add @CustomElement
R=sigmund@google.com
Review URL: https://codereview.chromium.org//957883002
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27f70dc..63dc3c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+#### 0.10.4
+ * Added `CustomElement` annotation. This can be added to any class to register
+ it with a tag in the main document.
+ * Added a `web_components.dart` file which exports all the annotations
+ provided by this package. Note that in later breaking releases
+ `html_import_annotation.dart` and `custom_element_proxy.dart` will likely
+ move into the `src` folder, so switching to the `web_components.dart` import
+ is recommended.
+
#### 0.10.3
* Added `generateWebComponentsBootstrap` method to the main `web_components`
transformer file which accepts a `Transform` and a `Resolver`. You can use
diff --git a/lib/src/custom_element.dart b/lib/src/custom_element.dart
new file mode 100644
index 0000000..1678fcc
--- /dev/null
+++ b/lib/src/custom_element.dart
@@ -0,0 +1,22 @@
+// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+library web_components.custom_element;
+
+import 'dart:html' show document;
+import 'package:initialize/initialize.dart';
+
+/// Annotation which registers a custom element with the main document.
+class CustomElement implements Initializer<Type> {
+ /// The tag you want to register the class to handle.
+ final String tag;
+
+ /// If this element extends a native html element, then this is the tag that
+ /// represents that element.
+ final String extendsTag;
+
+ const CustomElement(this.tag, {this.extendsTag});
+
+ void initialize(Type t) =>
+ document.registerElement(tag, t, extendsTag: extendsTag);
+}
diff --git a/lib/web_components.dart b/lib/web_components.dart
new file mode 100644
index 0000000..379d04e
--- /dev/null
+++ b/lib/web_components.dart
@@ -0,0 +1,8 @@
+// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+library web_components;
+
+export 'src/custom_element.dart';
+export 'custom_element_proxy.dart';
+export 'html_import_annotation.dart';
diff --git a/pubspec.yaml b/pubspec.yaml
index 0c9944b..b77a5e5 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,5 +1,5 @@
name: web_components
-version: 0.10.3
+version: 0.10.4
author: Polymer.dart Authors <web-ui-dev@dartlang.org>
homepage: https://www.dartlang.org/polymer-dart/
description: >
@@ -23,6 +23,7 @@
- web_components:
$include: '**/*_test.html'
entry_points:
+ - test/custom_element_test.html
- test/custom_element_proxy_test.html
- test/html_import_annotation_test.html
diff --git a/test/custom_element_test.dart b/test/custom_element_test.dart
new file mode 100644
index 0000000..bd06fa7
--- /dev/null
+++ b/test/custom_element_test.dart
@@ -0,0 +1,90 @@
+// Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+library web_components.test.custom_element_test;
+
+import 'dart:async';
+import 'dart:html';
+import 'package:initialize/initialize.dart' as init;
+import 'package:unittest/html_config.dart';
+import 'package:unittest/unittest.dart';
+import 'package:web_components/web_components.dart';
+
+@CustomElement('basic-element')
+class BasicElement extends HtmlElement {
+ BasicElement.created() : super.created();
+
+ factory BasicElement() => document.createElement('basic-element');
+}
+
+@CustomElement('child-element')
+class ChildElement extends BasicElement {
+ ChildElement.created() : super.created();
+
+ factory ChildElement() => document.createElement('child-element');
+}
+
+@CustomElement('extended-element', extendsTag: 'input')
+class ExtendedElement extends InputElement {
+ ExtendedElement.created() : super.created();
+
+ factory ExtendedElement() =>
+ document.createElement('input', 'extended-element');
+}
+
+main() {
+ useHtmlConfiguration();
+ init.run().then((_) {
+ var container = querySelector('#container') as DivElement;
+
+ tearDown(() {
+ container.children.clear();
+ });
+
+ test('basic custom element', () {
+ expect(document.querySelector('basic-element') is BasicElement, isTrue);
+ container.append(new BasicElement());
+ container.appendHtml('<basic-element></basic-element>');
+ // TODO(jakemac): after appendHtml elements are upgraded asynchronously,
+ // why? https://github.com/dart-lang/web-components/issues/4
+ return new Future(() {}).then((_) {
+ var elements = container.querySelectorAll('basic-element');
+ expect(elements.length, 2);
+ for (var element in elements) {
+ expect(element is BasicElement, isTrue);
+ }
+ });
+ });
+
+ test('child custom element', () {
+ expect(document.querySelector('child-element') is ChildElement, isTrue);
+ container.append(new ChildElement());
+ container.appendHtml('<child-element></child-element>');
+ // TODO(jakemac): after appendHtml elements are upgraded asynchronously,
+ // why? https://github.com/dart-lang/web-components/issues/4
+ return new Future(() {}).then((_) {
+ var elements = container.querySelectorAll('child-element');
+ expect(elements.length, 2);
+ for (var element in elements) {
+ expect(element is ChildElement, isTrue);
+ }
+ });
+ });
+
+
+ test('extends input element', () {
+ expect(document.querySelector('input') is ExtendedElement, isTrue);
+ container.append(new ExtendedElement());
+ container.appendHtml('<input is="extended-element" />');
+ // TODO(jakemac): after appendHtml elements are upgraded asynchronously,
+ // why? https://github.com/dart-lang/web-components/issues/4
+ return new Future(() {}).then((_) {
+ var elements = container.querySelectorAll('input');
+ expect(elements.length, 2);
+ for (var element in elements) {
+ expect(element is ExtendedElement, isTrue);
+ }
+ });
+ });
+ });
+}
diff --git a/test/custom_element_test.html b/test/custom_element_test.html
new file mode 100644
index 0000000..fbf8f9c
--- /dev/null
+++ b/test/custom_element_test.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="dart.unittest" content="full-stack-traces">
+ <title> custom_element test </title>
+ <style>
+ .unittest-table { font-family:monospace; border:1px; }
+ .unittest-pass { background: #6b3;}
+ .unittest-fail { background: #d55;}
+ .unittest-error { background: #a11;}
+ </style>
+ <script src="/packages/web_components/webcomponents.js"></script>
+ <script src="/packages/web_components/interop_support.js"></script>
+ <script src="/packages/web_components/dart_support.js"></script>
+</head>
+<body>
+ <h1> Running custom_element </h1>
+ <basic-element></basic-element>
+ <child-element></child-element>
+ <input is="extended-element" />
+ <div id="container">
+ </div>
+
+ <script type="text/javascript"
+ src="/root_dart/tools/testing/dart/test_controller.js"></script>
+ <script type="application/dart" src="custom_element_test.dart"></script>
+ <script type="text/javascript" src="/packages/browser/dart.js"></script>
+</body>
+</html>
