Skip to content

Commit

Permalink
feat(compiler): ElementSchema now has explicit DOM schema information
Browse files Browse the repository at this point in the history 
This makes the schema available for offline compile compiler as well.

Closes angular#8179
  • Loading branch information
@mhevery
mhevery committed Apr 27, 2016
1 parent 1ad2a02 commit d327ac4
Show file tree
Hide file tree
Showing 5 changed files with 424 additions and 35 deletions.
262 changes: 240 additions & 22 deletions modules/angular2/src/compiler/schema/dom_element_schema_registry.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,243 @@
import {Injectable} from 'angular2/src/core/di';
import {isPresent, isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
import {isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
import {StringMapWrapper} from 'angular2/src/facade/collection';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
import {splitNsName} from 'angular2/src/compiler/html_tags';

import {ElementSchemaRegistry} from './element_schema_registry';

const NAMESPACE_URIS =
CONST_EXPR({'xlink': 'http://www.w3.org/1999/xlink', 'svg': 'http://www.w3.org/2000/svg'});
const EVENT = 'event';
const BOOLEAN = 'boolean';
const NUMBER = 'number';
const STRING = 'string';
const OBJECT = 'object';

/**
* This array represents the DOM schema. It encodes inheritance, properties, and events.
*
* ## Overview
*
* Each line represents one kind of element. The `element_inheritance` and properties are joined
* using `element_inheritance|preperties` syntax.
*
* ## Element Inheritance
*
* The `element_inheritance` can be further subdivided as `element1,element2,...^parentElement`.
* Here the individual elements are separated by `,` (commas). Every element in the list
* has identical properties.
*
* An `element` may inherit additional properties from `parentElement` If no `^parentElement` is
* specified then `""` (blank) element is assumed.
*
* NOTE: The blank element inherits from root `*` element, the super element of all elements.
*
* NOTE an element prefix such as `@svg:` has no special meaning to the schema.
*
* ## Properties
*
* Each element has a set of properties separated by `,` (commas). Each property can be prefixed
* by a special character designating its type:
*
* - (no prefix): property is a string.
* - `*`: property represents an event.
* - `!`: property is a boolean.
* - `#`: property is a number.
* - `%`: property is an object.
*
* ## Query
*
* The class creates an internal squas representaino which allows to easily answer the query of
* if a given property exist on a given element.
*
* NOTE: We don't yet support querying for types or events.
* NOTE: This schema is auto extracted from `schema_extractor.ts` located in the test folder.
*/
const SCHEMA: string[] =
CONST_EXPR([
'*|%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
'^*|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*autocomplete,*autocompleteerror,*beforecopy,*beforecut,*beforepaste,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*copy,*cuechange,*cut,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*message,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*mozfullscreenchange,*mozfullscreenerror,*mozpointerlockchange,*mozpointerlockerror,*paste,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*search,*seeked,*seeking,*select,*selectstart,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,*webglcontextcreationerror,*webglcontextlost,*webglcontextrestored,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerText,!spellcheck,%style,#tabIndex,title,!translate',
'media|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,#volume',
'@svg:^*|*abort,*autocomplete,*autocompleteerror,*blur,*cancel,*canplay,*canplaythrough,*change,*click,*close,*contextmenu,*cuechange,*dblclick,*drag,*dragend,*dragenter,*dragleave,*dragover,*dragstart,*drop,*durationchange,*emptied,*ended,*error,*focus,*input,*invalid,*keydown,*keypress,*keyup,*load,*loadeddata,*loadedmetadata,*loadstart,*mousedown,*mouseenter,*mouseleave,*mousemove,*mouseout,*mouseover,*mouseup,*mousewheel,*pause,*play,*playing,*progress,*ratechange,*reset,*resize,*scroll,*seeked,*seeking,*select,*show,*stalled,*submit,*suspend,*timeupdate,*toggle,*volumechange,*waiting,%style,#tabIndex',
'@svg:graphics^@svg:|',
'@svg:animation^@svg:|*begin,*end,*repeat',
'@svg:geometry^@svg:|',
'@svg:componentTransferFunction^@svg:|',
'@svg:gradient^@svg:|',
'@svg:textContent^@svg:graphics|',
'@svg:textPositioning^@svg:textContent|',
'a|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,rel,rev,search,shape,target,text,type,username',
'area|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,search,shape,target,username',
'audio^media|',
'br|clear',
'base|href,target',
'body|aLink,background,bgColor,link,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,text,vLink',
'button|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
'canvas|#height,#width',
'content|select',
'dl|!compact',
'datalist|',
'details|!open',
'dialog|!open,returnValue',
'dir|!compact',
'div|align',
'embed|align,height,name,src,type,width',
'fieldset|!disabled,name',
'font|color,face,size',
'form|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
'frame|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
'frameset|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
'hr|align,color,!noShade,size,width',
'head|',
'h1,h2,h3,h4,h5,h6|align',
'html|version',
'iframe|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,%sandbox,scrolling,src,srcdoc,width',
'img|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,sizes,src,srcset,useMap,#vspace,#width',
'input|accept,align,alt,autocapitalize,autocomplete,!autofocus,!checked,!defaultChecked,defaultValue,dirName,!disabled,%files,formAction,formEnctype,formMethod,!formNoValidate,formTarget,#height,!incremental,!indeterminate,max,#maxLength,min,#minLength,!multiple,name,pattern,placeholder,!readOnly,!required,selectionDirection,#selectionEnd,#selectionStart,#size,src,step,type,useMap,value,%valueAsDate,#valueAsNumber,#width',
'keygen|!autofocus,challenge,!disabled,keytype,name',
'li|type,#value',
'label|htmlFor',
'legend|align',
'link|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
'map|name',
'marquee|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
'menu|!compact',
'meta|content,httpEquiv,name,scheme',
'meter|#high,#low,#max,#min,#optimum,#value',
'ins,del|cite,dateTime',
'ol|!compact,!reversed,#start,type',
'object|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
'optgroup|!disabled,label',
'option|!defaultSelected,!disabled,label,!selected,text,value',
'output|defaultValue,%htmlFor,name,value',
'p|align',
'param|name,type,value,valueType',
'picture|',
'pre|#width',
'progress|#max,#value',
'q,blockquote,cite|',
'script|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
'select|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
'shadow|',
'source|media,sizes,src,srcset,type',
'span|',
'style|!disabled,media,type',
'caption|align',
'th,td|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
'col,colgroup|align,ch,chOff,#span,vAlign,width',
'table|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
'tr|align,bgColor,ch,chOff,vAlign',
'tfoot,thead,tbody|align,ch,chOff,vAlign',
'template|',
'textarea|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
'title|text',
'track|!default,kind,label,src,srclang',
'ul|!compact,type',
'unknown|',
'video^media|#height,poster,#width',
'@svg:a^@svg:graphics|',
'@svg:animate^@svg:animation|',
'@svg:animateMotion^@svg:animation|',
'@svg:animateTransform^@svg:animation|',
'@svg:circle^@svg:geometry|',
'@svg:clipPath^@svg:graphics|',
'@svg:cursor^@svg:|',
'@svg:defs^@svg:graphics|',
'@svg:desc^@svg:|',
'@svg:discard^@svg:|',
'@svg:ellipse^@svg:geometry|',
'@svg:feBlend^@svg:|',
'@svg:feColorMatrix^@svg:|',
'@svg:feComponentTransfer^@svg:|',
'@svg:feComposite^@svg:|',
'@svg:feConvolveMatrix^@svg:|',
'@svg:feDiffuseLighting^@svg:|',
'@svg:feDisplacementMap^@svg:|',
'@svg:feDistantLight^@svg:|',
'@svg:feDropShadow^@svg:|',
'@svg:feFlood^@svg:|',
'@svg:feFuncA^@svg:componentTransferFunction|',
'@svg:feFuncB^@svg:componentTransferFunction|',
'@svg:feFuncG^@svg:componentTransferFunction|',
'@svg:feFuncR^@svg:componentTransferFunction|',
'@svg:feGaussianBlur^@svg:|',
'@svg:feImage^@svg:|',
'@svg:feMerge^@svg:|',
'@svg:feMergeNode^@svg:|',
'@svg:feMorphology^@svg:|',
'@svg:feOffset^@svg:|',
'@svg:fePointLight^@svg:|',
'@svg:feSpecularLighting^@svg:|',
'@svg:feSpotLight^@svg:|',
'@svg:feTile^@svg:|',
'@svg:feTurbulence^@svg:|',
'@svg:filter^@svg:|',
'@svg:foreignObject^@svg:graphics|',
'@svg:g^@svg:graphics|',
'@svg:image^@svg:graphics|',
'@svg:line^@svg:geometry|',
'@svg:linearGradient^@svg:gradient|',
'@svg:mpath^@svg:|',
'@svg:marker^@svg:|',
'@svg:mask^@svg:|',
'@svg:metadata^@svg:|',
'@svg:path^@svg:geometry|',
'@svg:pattern^@svg:|',
'@svg:polygon^@svg:geometry|',
'@svg:polyline^@svg:geometry|',
'@svg:radialGradient^@svg:gradient|',
'@svg:rect^@svg:geometry|',
'@svg:svg^@svg:graphics|#currentScale,#zoomAndPan',
'@svg:script^@svg:|type',
'@svg:set^@svg:animation|',
'@svg:stop^@svg:|',
'@svg:style^@svg:|!disabled,media,title,type',
'@svg:switch^@svg:graphics|',
'@svg:symbol^@svg:|',
'@svg:tspan^@svg:textPositioning|',
'@svg:text^@svg:textPositioning|',
'@svg:textPath^@svg:textContent|',
'@svg:title^@svg:|',
'@svg:use^@svg:graphics|',
'@svg:view^@svg:|#zoomAndPan'
]);

var attrToPropMap: {[name: string]: string} = <any>{
'class': 'className',
'innerHtml': 'innerHTML',
'readonly': 'readOnly',
'tabindex': 'tabIndex'
};


@Injectable()
export class DomElementSchemaRegistry extends ElementSchemaRegistry {
private _protoElements = new Map<string, Element>();

private _getProtoElement(tagName: string): Element {
var element = this._protoElements.get(tagName);
if (isBlank(element)) {
var nsAndName = splitNsName(tagName);
element = isPresent(nsAndName[0]) ?
DOM.createElementNS(NAMESPACE_URIS[nsAndName[0]], nsAndName[1]) :
DOM.createElement(nsAndName[1]);
this._protoElements.set(tagName, element);
}
return element;
export class DomElementSchemaRegistry implements ElementSchemaRegistry {
schema = <{[element: string]: {[property: string]: string}}>{};

constructor() {
SCHEMA.forEach(encodedType => {
var parts = encodedType.split('|');
var properties = parts[1].split(',');
var typeParts = (parts[0] + '^').split('^');
var typeName = typeParts[0];
var type = <{[property: string]: string}>{};
typeName.split(',').forEach(tag => this.schema[tag] = type);
var superType = this.schema[typeParts[1]];
if (isPresent(superType)) {
StringMapWrapper.forEach(superType, (v, k) => type[k] = v);
}
properties.forEach((property: string) => {
if (property == '') {
} else if (property.startsWith('*')) {
// We don't yet support events.
// type[property.substring(1)] = EVENT;
} else if (property.startsWith('!')) {
type[property.substring(1)] = BOOLEAN;
} else if (property.startsWith('#')) {
type[property.substring(1)] = NUMBER;
} else if (property.startsWith('%')) {
type[property.substring(1)] = OBJECT;
} else {
type[property] = STRING;
}
});
});
}

hasProperty(tagName: string, propName: string): boolean {
Expand All @@ -31,13 +246,16 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
// once it is instantiated
return true;
} else {
var elm = this._getProtoElement(tagName);
return DOM.hasProperty(elm, propName);
var elementProperties = this.schema[tagName.toLowerCase()];
if (!isPresent(elementProperties)) {
elementProperties = this.schema['unknown'];
}
return isPresent(elementProperties[propName]);
}
}

getMappedPropName(propName: string): string {
var mappedPropName = StringMapWrapper.get(DOM.attrToPropMap, propName);
var mappedPropName = StringMapWrapper.get(attrToPropMap, propName);
return isPresent(mappedPropName) ? mappedPropName : propName;
}
}
48 changes: 37 additions & 11 deletions modules/angular2/test/compiler/schema/dom_element_schema_registry_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,45 @@ import {
it,
xit
} from 'angular2/testing_internal';
import {IS_DART} from 'angular2/src/facade/lang';

import {DomElementSchemaRegistry} from 'angular2/src/compiler/schema/dom_element_schema_registry';
import {extractSchema} from './schema_extractor';

export function main() {
// DOMElementSchema can only be used on the JS side where we can safely
// use reflection for DOM elements
if (IS_DART) return;

var registry: DomElementSchemaRegistry;

beforeEach(() => { registry = new DomElementSchemaRegistry(); });

describe('DOMElementSchema', () => {
var registry: DomElementSchemaRegistry;
beforeEach(() => { registry = new DomElementSchemaRegistry(); });

it('should detect properties on regular elements', () => {
expect(registry.hasProperty('div', 'id')).toBeTruthy();
expect(registry.hasProperty('div', 'title')).toBeTruthy();
expect(registry.hasProperty('h1', 'align')).toBeTruthy();
expect(registry.hasProperty('h2', 'align')).toBeTruthy();
expect(registry.hasProperty('h3', 'align')).toBeTruthy();
expect(registry.hasProperty('h4', 'align')).toBeTruthy();
expect(registry.hasProperty('h5', 'align')).toBeTruthy();
expect(registry.hasProperty('h6', 'align')).toBeTruthy();
expect(registry.hasProperty('h7', 'align')).toBeFalsy();
expect(registry.hasProperty('textarea', 'disabled')).toBeTruthy();
expect(registry.hasProperty('input', 'disabled')).toBeTruthy();
expect(registry.hasProperty('div', 'unknown')).toBeFalsy();
});

it('should return true for custom-like elements',
() => { expect(registry.hasProperty('custom-like', 'unknown')).toBeTruthy(); });
it('should detect different kinds of types',
() => {
// inheritance: video => media => *
expect(registry.hasProperty('video', 'className')).toBeTruthy(); // from *
expect(registry.hasProperty('video', 'id')).toBeTruthy(); // string
expect(registry.hasProperty('video', 'scrollLeft')).toBeTruthy(); // number
expect(registry.hasProperty('video', 'height')).toBeTruthy(); // number
expect(registry.hasProperty('video', 'autoplay')).toBeTruthy(); // boolean
expect(registry.hasProperty('video', 'classList')).toBeTruthy(); // object
// from *; but events are not properties
expect(registry.hasProperty('video', 'click')).toBeFalsy();
})

it('should return true for custom-like elements',
() => { expect(registry.hasProperty('custom-like', 'unknown')).toBeTruthy(); });

it('should re-map property names that are specified in DOM facade',
() => { expect(registry.getMappedPropName('readonly')).toEqual('readOnly'); });
Expand All @@ -43,5 +59,15 @@ export function main() {

it('should detect properties on namespaced elements',
() => { expect(registry.hasProperty('@svg:g', 'id')).toBeTruthy(); });

it('generate a new schema', () => {
// console.log(JSON.stringify(registry.properties));
extractSchema(
(descriptors) => {
// Uncomment this line to see:
// the generated schema which can then be pasted to the DomElementSchemaRegistry
// console.log(descriptors);
});
});
});
}
5 changes: 5 additions & 0 deletions modules/angular2/test/compiler/schema/schema_extractor.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/**
* We don't know how to extract schema in dart, so do nothing.
*/
extractSchema(fn(List<String> descriptors)) {
}
Loading

0 comments on commit d327ac4

Please sign in to comment.