feat(compiler): DOM adapters + html5lib implementation; misc fixes

This commit is contained in:
Yegor Jbanov
2015-02-27 14:50:06 -08:00
parent ab42664e76
commit 757eae8ad3
79 changed files with 1223 additions and 643 deletions

View File

@ -0,0 +1,194 @@
library angular.core.facade.dom;
import 'dart:html';
import 'dart:js' show JsObject;
import 'dom_adapter.dart' show setRootDomAdapter, DomAdapter;
import '../facade/browser.dart';
// WARNING: Do not expose outside this class. Parsing HTML using this
// sanitizer is a security risk.
class _IdentitySanitizer implements NodeTreeSanitizer {
void sanitizeTree(Node node) {}
}
final _identitySanitizer = new _IdentitySanitizer();
class BrowserDomAdapter extends DomAdapter {
static void makeCurrent() {
setRootDomAdapter(new BrowserDomAdapter());
}
// override JS logic of attribute to property mapping
@override
final attrToPropMap = const {
"inner-html": "innerHtml"
};
query(String selector) => document.querySelector(selector);
Element querySelector(el, String selector) =>
el.querySelector(selector);
ElementList querySelectorAll(el, String selector) =>
el.querySelectorAll(selector);
void on(EventTarget element, String event, callback(arg)) {
// due to https://code.google.com/p/dart/issues/detail?id=17406
// addEventListener misses zones so we use element.on.
element.on[event].listen(callback);
}
void dispatchEvent(EventTarget el, Event evt) {
el.dispatchEvent(evt);
}
MouseEvent createMouseEvent(String eventType) =>
new MouseEvent(eventType, canBubble: true);
createEvent(eventType) =>
new Event(eventType, canBubble: true);
String getInnerHTML(Element el) => el.innerHtml;
String getOuterHTML(Element el) => el.outerHtml;
void setInnerHTML(Element el, String value) {
el.innerHtml = value;
}
String nodeName(Node el) => el.nodeName;
String nodeValue(Node el) => el.nodeValue;
String type(InputElement el) => el.type;
Node content(TemplateElement el) => el.content;
Node firstChild(el) => el.firstChild;
Node nextSibling(Node el) => el.nextNode;
Element parentElement(Node el) => el.parent;
List<Node> childNodes(Node el) => el.childNodes;
List childNodesAsList(Node el) => childNodes(el).toList();
void clearNodes(Node el) {
el.nodes = const [];
}
void appendChild(Node el, Node node) {
el.append(node);
}
void removeChild(Element el, Node node) {
node.remove();
}
Element remove(Element el) {
return el..remove();
}
insertBefore(Node el, node) {
el.parentNode.insertBefore(node, el);
}
void insertAllBefore(Node el, Iterable<Node> nodes) {
el.parentNode.insertAllBefore(nodes, el);
}
void insertAfter(Node el, Node node) {
el.parentNode.insertBefore(node, el.nextNode);
}
String getText(Node el) => el.text;
void setText(Node el, String value) {
el.text = value;
}
String getValue(InputElement el) => el.value;
void setValue(InputElement el, String value) {
el.value = value;
}
bool getChecked(InputElement el) => el.checked;
void setChecked(InputElement el, bool isChecked) {
el.checked = isChecked;
}
TemplateElement createTemplate(String html) {
var t = new TemplateElement();
// We do not sanitize because templates are part of the application code
// not user code.
t.setInnerHtml(html, treeSanitizer: _identitySanitizer);
return t;
}
Element createElement(String tagName, [HtmlDocument doc = null]) {
if (doc == null) doc = document;
return doc.createElement(tagName);
}
createTextNode(String text, [HtmlDocument doc = null]) {
return new Text(text);
}
createScriptTag(String attrName, String attrValue,
[HtmlDocument doc = null]) {
if (doc == null) doc = document;
var el = doc.createElement("SCRIPT");
el.setAttribute(attrName, attrValue);
return el;
}
StyleElement createStyleElement(String css, [HtmlDocument doc = null]) {
if (doc == null) doc = document;
var el = doc.createElement("STYLE");
el.text = css;
return el;
}
ShadowRoot createShadowRoot(Element el) => el.createShadowRoot();
ShadowRoot getShadowRoot(Element el) => el.shadowRoot;
clone(Node node) => node.clone(true);
bool hasProperty(Element element, String name) =>
new JsObject.fromBrowserObject(element).hasProperty(name);
List<Node> getElementsByClassName(Element element, String name) =>
element.getElementsByClassName(name);
List<Node> getElementsByTagName(Element element, String name) =>
element.querySelectorAll(name);
List<String> classList(Element element) => element.classes.toList();
void addClass(Element element, String classname) {
element.classes.add(classname);
}
void removeClass(Element element, String classname) {
element.classes.remove(classname);
}
bool hasClass(Element element, String classname) =>
element.classes.contains(classname);
setStyle(Element element, String stylename, String stylevalue) {
element.style.setProperty(stylename, stylevalue);
}
removeStyle(Element element, String stylename) {
element.style.removeProperty(stylename);
}
getStyle(Element element, String stylename) {
return element.style.getPropertyValue(stylename);
}
String tagName(Element element) => element.tagName;
Map<String, String> attributeMap(Element element) =>
element.attributes;
String getAttribute(Element element, String attribute) =>
element.getAttribute(attribute);
void setAttribute(Element element, String name, String value) {
element.setAttribute(name, value);
}
void removeAttribute(Element element, String name) {
//there is no removeAttribute method as of now in Dart:
//https://code.google.com/p/dart/issues/detail?id=19934
element.attributes.remove(name);
}
Node templateAwareRoot(Element el) =>
el is TemplateElement ? el.content : el;
HtmlDocument createHtmlDocument() =>
document.implementation.createHtmlDocument('fakeTitle');
HtmlDocument defaultDoc() => document;
bool elementMatches(n, String selector) =>
n is Element && n.matches(selector);
bool isTemplateElement(Element el) =>
el is TemplateElement;
bool isTextNode(Node node) =>
node.nodeType == Node.TEXT_NODE;
bool isCommentNode(Node node) => node.nodeType == Node.COMMENT_NODE;
bool isElementNode(Node node) =>
node.nodeType == Node.ELEMENT_NODE;
bool hasShadowRoot(Node node) {
return node is Element && node.shadowRoot != null;
}
Node importIntoDoc(Node node) {
return document.importNode(node, true);
}
isPageRule(CssRule rule) => rule is CssPageRule;
isStyleRule(CssRule rule) => rule is CssStyleRule;
isMediaRule(CssRule rule) => rule is CssMediaRule;
isKeyframesRule(CssRule rule) => rule is CssKeyframesRule;
}

View File

@ -0,0 +1,247 @@
import {List, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {isPresent} from 'angular2/src/facade/lang';
import {DomAdapter, setRootDomAdapter} from './dom_adapter';
var EMPTY_MAP = MapWrapper.create();
export class BrowserDomAdapter extends DomAdapter {
static makeCurrent() {
setRootDomAdapter(new BrowserDomAdapter());
}
get attrToPropMap():Map {
return EMPTY_MAP
}
query(selector) {
return document.querySelector(selector);
}
querySelector(el, selector:string):Node {
return el.querySelector(selector);
}
querySelectorAll(el, selector:string):NodeList {
return el.querySelectorAll(selector);
}
on(el, evt, listener) {
el.addEventListener(evt, listener, false);
}
dispatchEvent(el, evt) {
el.dispatchEvent(evt);
}
createMouseEvent(eventType) {
var evt = new MouseEvent(eventType);
evt.initEvent(eventType, true, true);
return evt;
}
createEvent(eventType) {
return new Event(eventType, true);
}
getInnerHTML(el) {
return el.innerHTML;
}
getOuterHTML(el) {
return el.outerHTML;
}
nodeName(node:Node):string {
return node.nodeName;
}
nodeValue(node:Node):string {
return node.nodeValue;
}
type(node:string) {
return node.type;
}
content(node:HTMLTemplateElement):Node {
return node.content;
}
firstChild(el):Node {
return el.firstChild;
}
nextSibling(el):Node {
return el.nextSibling;
}
parentElement(el) {
return el.parentElement;
}
childNodes(el):NodeList {
return el.childNodes;
}
childNodesAsList(el):List {
var childNodes = el.childNodes;
var res = ListWrapper.createFixedSize(childNodes.length);
for (var i=0; i<childNodes.length; i++) {
res[i] = childNodes[i];
}
return res;
}
clearNodes(el) {
el.innerHTML = "";
}
appendChild(el, node) {
el.appendChild(node);
}
removeChild(el, node) {
el.removeChild(node);
}
remove(el) {
var parent = el.parentNode;
parent.removeChild(el);
return el;
}
insertBefore(el, node) {
el.parentNode.insertBefore(node, el);
}
insertAllBefore(el, nodes) {
ListWrapper.forEach(nodes, (n) => {
el.parentNode.insertBefore(n, el);
});
}
insertAfter(el, node) {
el.parentNode.insertBefore(node, el.nextSibling);
}
setInnerHTML(el, value) {
el.innerHTML = value;
}
getText(el) {
return el.textContent;
}
// TODO(vicb): removed Element type because it does not support StyleElement
setText(el, value:string) {
el.textContent = value;
}
getValue(el) {
return el.value;
}
setValue(el, value:string) {
el.value = value;
}
getChecked(el) {
return el.checked;
}
setChecked(el, value:boolean) {
el.checked = value;
}
createTemplate(html) {
var t = document.createElement('template');
t.innerHTML = html;
return t;
}
createElement(tagName, doc=document) {
return doc.createElement(tagName);
}
createTextNode(text: string, doc=document) {
return doc.createTextNode(text);
}
createScriptTag(attrName:string, attrValue:string, doc=document) {
var el = doc.createElement("SCRIPT");
el.setAttribute(attrName, attrValue);
return el;
}
createStyleElement(css:string, doc=document):HTMLStyleElement {
var style = doc.createElement('STYLE');
style.innerText = css;
return style;
}
createShadowRoot(el:HTMLElement): ShadowRoot {
return el.createShadowRoot();
}
getShadowRoot(el:HTMLElement): ShadowRoot {
return el.shadowRoot;
}
clone(node:Node) {
return node.cloneNode(true);
}
hasProperty(element, name:string) {
return name in element;
}
getElementsByClassName(element, name:string) {
return element.getElementsByClassName(name);
}
getElementsByTagName(element, name:string) {
return element.getElementsByTagName(name);
}
classList(element):List {
return Array.prototype.slice.call(element.classList, 0);
}
addClass(element, classname:string) {
element.classList.add(classname);
}
removeClass(element, classname:string) {
element.classList.remove(classname);
}
hasClass(element, classname:string) {
return element.classList.contains(classname);
}
setStyle(element, stylename:string, stylevalue:string) {
element.style[stylename] = stylevalue;
}
removeStyle(element, stylename:string) {
element.style[stylename] = null;
}
getStyle(element, stylename:string) {
return element.style[stylename];
}
tagName(element):string {
return element.tagName;
}
attributeMap(element) {
var res = MapWrapper.create();
var elAttrs = element.attributes;
for (var i = 0; i < elAttrs.length; i++) {
var attrib = elAttrs[i];
MapWrapper.set(res, attrib.name, attrib.value);
}
return res;
}
getAttribute(element, attribute:string) {
return element.getAttribute(attribute);
}
setAttribute(element, name:string, value:string) {
element.setAttribute(name, value);
}
removeAttribute(element, attribute:string) {
return element.removeAttribute(attribute);
}
templateAwareRoot(el) {
return el instanceof HTMLTemplateElement ? el.content : el;
}
createHtmlDocument() {
return document.implementation.createHTMLDocument();
}
defaultDoc() {
return document;
}
elementMatches(n, selector:string):boolean {
return n instanceof HTMLElement && n.matches(selector);
}
isTemplateElement(el:any):boolean {
return el instanceof HTMLTemplateElement;
}
isTextNode(node:Node):boolean {
return node.nodeType === Node.TEXT_NODE;
}
isCommentNode(node:Node):boolean {
return node.nodeType === Node.TEXT_NODE;
}
isElementNode(node:Node):boolean {
return node.nodeType === Node.ELEMENT_NODE;
}
hasShadowRoot(node):boolean {
return node instanceof HTMLElement && isPresent(node.shadowRoot);
}
importIntoDoc(node:Node) {
return document.importNode(node, true);
}
isPageRule(rule) {
return rule.type === CSSRule.PAGE_RULE;
}
isStyleRule(rule) {
return rule.type === CSSRule.STYLE_RULE;
}
isMediaRule(rule) {
return rule.type === CSSRule.MEDIA_RULE;
}
isKeyframesRule(rule) {
return rule.type === CSSRule.KEYFRAMES_RULE;
}
}

231
modules/angular2/src/dom/dom_adapter.js vendored Normal file
View File

@ -0,0 +1,231 @@
import {ABSTRACT, BaseException} from 'angular2/src/facade/lang';
export var DOM:DomAdapter;
export function setRootDomAdapter(adapter:DomAdapter) {
DOM = adapter;
}
function _abstract() {
return new BaseException('This method is abstract');
}
/**
* Provides DOM operations in an environment-agnostic way.
*/
@ABSTRACT()
export class DomAdapter {
get attrToPropMap():Map {
throw _abstract();
}
parse(templateHtml:string) {
throw _abstract();
}
query(selector) {
throw _abstract();
}
querySelector(el, selector:string) {
throw _abstract();
}
querySelectorAll(el, selector:string):List {
throw _abstract();
}
on(el, evt, listener) {
throw _abstract();
}
dispatchEvent(el, evt) {
throw _abstract();
}
createMouseEvent(eventType) {
throw _abstract();
}
createEvent(eventType) {
throw _abstract();
}
getInnerHTML(el) {
throw _abstract();
}
getOuterHTML(el) {
throw _abstract();
}
nodeName(node):string {
throw _abstract();
}
nodeValue(node):string {
throw _abstract();
}
type(node):string {
throw _abstract();
}
content(node) {
throw _abstract();
}
firstChild(el) {
throw _abstract();
}
nextSibling(el) {
throw _abstract();
}
parentElement(el) {
throw _abstract();
}
childNodes(el):List {
throw _abstract();
}
childNodesAsList(el):List {
throw _abstract();
}
clearNodes(el) {
throw _abstract();
}
appendChild(el, node) {
throw _abstract();
}
removeChild(el, node) {
throw _abstract();
}
remove(el) {
throw _abstract();
}
insertBefore(el, node) {
throw _abstract();
}
insertAllBefore(el, nodes) {
throw _abstract();
}
insertAfter(el, node) {
throw _abstract();
}
setInnerHTML(el, value) {
throw _abstract();
}
getText(el) {
throw _abstract();
}
setText(el, value:string) {
throw _abstract();
}
getValue(el) {
throw _abstract();
}
setValue(el, value:string) {
throw _abstract();
}
getChecked(el) {
throw _abstract();
}
setChecked(el, value:boolean) {
throw _abstract();
}
createTemplate(html) {
throw _abstract();
}
createElement(tagName, doc = null) {
throw _abstract();
}
createTextNode(text: string, doc = null) {
throw _abstract();
}
createScriptTag(attrName:string, attrValue:string, doc = null) {
throw _abstract();
}
createStyleElement(css:string, doc = null) {
throw _abstract();
}
createShadowRoot(el) {
throw _abstract();
}
getShadowRoot(el) {
throw _abstract();
}
clone(node) {
throw _abstract();
}
hasProperty(element, name:string) {
throw _abstract();
}
getElementsByClassName(element, name:string) {
throw _abstract();
}
getElementsByTagName(element, name:string) {
throw _abstract();
}
classList(element):List {
throw _abstract();
}
addClass(element, classname:string) {
throw _abstract();
}
removeClass(element, classname:string) {
throw _abstract();
}
hasClass(element, classname:string) {
throw _abstract();
}
setStyle(element, stylename:string, stylevalue:string) {
throw _abstract();
}
removeStyle(element, stylename:string) {
throw _abstract();
}
getStyle(element, stylename:string) {
throw _abstract();
}
tagName(element):string {
throw _abstract();
}
attributeMap(element) {
throw _abstract();
}
getAttribute(element, attribute:string) {
throw _abstract();
}
setAttribute(element, name:string, value:string) {
throw _abstract();
}
removeAttribute(element, attribute:string) {
throw _abstract();
}
templateAwareRoot(el) {
throw _abstract();
}
createHtmlDocument() {
throw _abstract();
}
defaultDoc() {
throw _abstract();
}
elementMatches(n, selector:string):boolean {
throw _abstract();
}
isTemplateElement(el:any):boolean {
throw _abstract();
}
isTextNode(node):boolean {
throw _abstract();
}
isCommentNode(node):boolean {
throw _abstract();
}
isElementNode(node):boolean {
throw _abstract();
}
hasShadowRoot(node):boolean {
throw _abstract();
}
importIntoDoc(node) {
throw _abstract();
}
isPageRule(rule) {
throw _abstract();
}
isStyleRule(rule) {
throw _abstract();
}
isMediaRule(rule) {
throw _abstract();
}
isKeyframesRule(rule) {
throw _abstract();
}
}

View File

@ -0,0 +1,229 @@
library angular2.dom.html5adapter;
import 'dom_adapter.dart';
import 'package:html5lib/parser.dart' as parser;
import 'package:html5lib/dom.dart';
class Html5LibDomAdapter implements DomAdapter {
static void makeCurrent() {
setRootDomAdapter(new Html5LibDomAdapter());
}
Element parse(String templateHtml) => parser.parse(templateHtml).firstChild;
query(selector) {
throw 'not implemented';
}
querySelector(el, String selector) {
throw 'not implemented';
}
List querySelectorAll(el, String selector) {
throw 'not implemented';
}
on(el, evt, listener) {
throw 'not implemented';
}
dispatchEvent(el, evt) {
throw 'not implemented';
}
createMouseEvent(eventType) {
throw 'not implemented';
}
createEvent(eventType) {
throw 'not implemented';
}
getInnerHTML(el) {
return el.innerHtml;
}
getOuterHTML(el) {
throw 'not implemented';
}
String nodeName(node) {
throw 'not implemented';
}
String nodeValue(node) {
throw 'not implemented';
}
String type(node) {
throw 'not implemented';
}
content(TemplateElement node) {
throw 'not implemented';
}
firstChild(el) => el is NodeList
? el.first
: el.firstChild;
nextSibling(el) {
final parentNode = el.parentNode;
if (parentNode == null) return null;
final siblings = parentNode.nodes;
final index = siblings.indexOf(el);
if (index < siblings.length - 1) {
return siblings[index + 1];
}
return null;
}
parentElement(el) {
throw 'not implemented';
}
List childNodes(el) {
throw 'not implemented';
}
List childNodesAsList(el) {
throw 'not implemented';
}
clearNodes(el) {
throw 'not implemented';
}
appendChild(el, node) {
throw 'not implemented';
}
removeChild(el, node) {
throw 'not implemented';
}
remove(el) {
throw 'not implemented';
}
insertBefore(el, node) {
throw 'not implemented';
}
insertAllBefore(el, nodes) {
throw 'not implemented';
}
insertAfter(el, node) {
throw 'not implemented';
}
setInnerHTML(el, value) {
throw 'not implemented';
}
getText(el) {
throw 'not implemented';
}
setText(el, String value) {
throw 'not implemented';
}
getValue(el) {
throw 'not implemented';
}
setValue(el, String value) {
throw 'not implemented';
}
getChecked(el) {
throw 'not implemented';
}
setChecked(el, bool value) {
throw 'not implemented';
}
createTemplate(html) {
return createElement('template')
..innerHtml = html;
}
createElement(tagName, [doc]) {
return new Element.tag(tagName);
}
createTextNode(String text, [doc]) {
throw 'not implemented';
}
createScriptTag(String attrName, String attrValue, [doc]) {
throw 'not implemented';
}
createStyleElement(String css, [doc]) {
throw 'not implemented';
}
clone(node) {
throw 'not implemented';
}
hasProperty(element, String name) {
throw 'not implemented';
}
getElementsByClassName(element, String name) {
throw 'not implemented';
}
getElementsByTagName(element, String name) {
throw 'not implemented';
}
List classList(element) {
throw 'not implemented';
}
addClass(element, String classname) {
throw 'not implemented';
}
removeClass(element, String classname) {
throw 'not implemented';
}
hasClass(element, String classname) =>
element.classes.contains(classname);
setStyle(element, String stylename, String stylevalue) {
throw 'not implemented';
}
removeStyle(element, String stylename) {
throw 'not implemented';
}
getStyle(element, String stylename) {
throw 'not implemented';
}
String tagName(element) => element.localName;
attributeMap(element) => element.attributes;
getAttribute(element, String attribute) {
throw 'not implemented';
}
setAttribute(element, String name, String value) {
throw 'not implemented';
}
removeAttribute(element, String attribute) {
throw 'not implemented';
}
templateAwareRoot(el) => isTemplateElement(el)
? el.nodes
: el;
createHtmlDocument() {
throw 'not implemented';
}
defaultDoc() {
throw 'not implemented';
}
bool elementMatches(n, String selector) {
throw 'not implemented';
}
bool isTemplateElement(Element el) {
return el != null && el.localName.toLowerCase() == 'template';
}
bool isTextNode(node) {
throw 'not implemented';
}
bool isCommentNode(node) {
throw 'not implemented';
}
bool isElementNode(node) => node is Element;
bool hasShadowRoot(node) {
throw 'not implemented';
}
importIntoDoc(node) {
throw 'not implemented';
}
isPageRule(rule) {
throw 'not implemented';
}
isStyleRule(rule) {
throw 'not implemented';
}
isMediaRule(rule) {
throw 'not implemented';
}
isKeyframesRule(rule) {
throw 'not implemented';
}
}