Skip to content

Commit 7201c3f

Browse files
mheveryrobwormald
mhevery
authored and
robwormald
committed
feat(compiler): ElementSchema now has explicit DOM schema information
This makes the schema available for offline compile compiler as well.
1 parent 75ac31a commit 7201c3f

File tree

5 files changed

+431
-17
lines changed

5 files changed

+431
-17
lines changed

‎modules/@angular/compiler/src/schema/dom_element_schema_registry.ts‎

Lines changed: 247 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,260 @@
1-
21
import {Injectable} from '@angular/core';
2+
import {isPresent, StringMapWrapper} from '@angular/facade';
33
import {ElementSchemaRegistry} from './element_schema_registry';
44

5+
const EVENT = 'event';
6+
const BOOLEAN = 'boolean';
7+
const NUMBER = 'number';
8+
const STRING = 'string';
9+
const OBJECT = 'object';
10+
11+
/**
12+
* This array represents the DOM schema. It encodes inheritance, properties, and events.
13+
*
14+
* ## Overview
15+
*
16+
* Each line represents one kind of element. The `element_inheritance` and properties are joined
17+
* using `element_inheritance|preperties` syntax.
18+
*
19+
* ## Element Inheritance
20+
*
21+
* The `element_inheritance` can be further subdivided as `element1,element2,...^parentElement`.
22+
* Here the individual elements are separated by `,` (commas). Every element in the list
23+
* has identical properties.
24+
*
25+
* An `element` may inherit additional properties from `parentElement` If no `^parentElement` is
26+
* specified then `""` (blank) element is assumed.
27+
*
28+
* NOTE: The blank element inherits from root `*` element, the super element of all elements.
29+
*
30+
* NOTE an element prefix such as `@svg:` has no special meaning to the schema.
31+
*
32+
* ## Properties
33+
*
34+
* Each element has a set of properties separated by `,` (commas). Each property can be prefixed
35+
* by a special character designating its type:
36+
*
37+
* - (no prefix): property is a string.
38+
* - `*`: property represents an event.
39+
* - `!`: property is a boolean.
40+
* - `#`: property is a number.
41+
* - `%`: property is an object.
42+
*
43+
* ## Query
44+
*
45+
* The class creates an internal squas representaino which allows to easily answer the query of
46+
* if a given property exist on a given element.
47+
*
48+
* NOTE: We don't yet support querying for types or events.
49+
* NOTE: This schema is auto extracted from `schema_extractor.ts` located in the test folder.
50+
*/
51+
const SCHEMA: string[] =
52+
/*@ts2dart_const*/ ([
53+
'*|%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
54+
'^*|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',
55+
'media|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,#volume',
56+
'@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',
57+
'@svg:graphics^@svg:|',
58+
'@svg:animation^@svg:|*begin,*end,*repeat',
59+
'@svg:geometry^@svg:|',
60+
'@svg:componentTransferFunction^@svg:|',
61+
'@svg:gradient^@svg:|',
62+
'@svg:textContent^@svg:graphics|',
63+
'@svg:textPositioning^@svg:textContent|',
64+
'a|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,rel,rev,search,shape,target,text,type,username',
65+
'area|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,search,shape,target,username',
66+
'audio^media|',
67+
'br|clear',
68+
'base|href,target',
69+
'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',
70+
'button|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
71+
'canvas|#height,#width',
72+
'content|select',
73+
'dl|!compact',
74+
'datalist|',
75+
'details|!open',
76+
'dialog|!open,returnValue',
77+
'dir|!compact',
78+
'div|align',
79+
'embed|align,height,name,src,type,width',
80+
'fieldset|!disabled,name',
81+
'font|color,face,size',
82+
'form|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
83+
'frame|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
84+
'frameset|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
85+
'hr|align,color,!noShade,size,width',
86+
'head|',
87+
'h1,h2,h3,h4,h5,h6|align',
88+
'html|version',
89+
'iframe|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,%sandbox,scrolling,src,srcdoc,width',
90+
'img|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,sizes,src,srcset,useMap,#vspace,#width',
91+
'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',
92+
'keygen|!autofocus,challenge,!disabled,keytype,name',
93+
'li|type,#value',
94+
'label|htmlFor',
95+
'legend|align',
96+
'link|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
97+
'map|name',
98+
'marquee|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
99+
'menu|!compact',
100+
'meta|content,httpEquiv,name,scheme',
101+
'meter|#high,#low,#max,#min,#optimum,#value',
102+
'ins,del|cite,dateTime',
103+
'ol|!compact,!reversed,#start,type',
104+
'object|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
105+
'optgroup|!disabled,label',
106+
'option|!defaultSelected,!disabled,label,!selected,text,value',
107+
'output|defaultValue,%htmlFor,name,value',
108+
'p|align',
109+
'param|name,type,value,valueType',
110+
'picture|',
111+
'pre|#width',
112+
'progress|#max,#value',
113+
'q,blockquote,cite|',
114+
'script|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
115+
'select|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
116+
'shadow|',
117+
'source|media,sizes,src,srcset,type',
118+
'span|',
119+
'style|!disabled,media,type',
120+
'caption|align',
121+
'th,td|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
122+
'col,colgroup|align,ch,chOff,#span,vAlign,width',
123+
'table|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
124+
'tr|align,bgColor,ch,chOff,vAlign',
125+
'tfoot,thead,tbody|align,ch,chOff,vAlign',
126+
'template|',
127+
'textarea|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
128+
'title|text',
129+
'track|!default,kind,label,src,srclang',
130+
'ul|!compact,type',
131+
'unknown|',
132+
'video^media|#height,poster,#width',
133+
'@svg:a^@svg:graphics|',
134+
'@svg:animate^@svg:animation|',
135+
'@svg:animateMotion^@svg:animation|',
136+
'@svg:animateTransform^@svg:animation|',
137+
'@svg:circle^@svg:geometry|',
138+
'@svg:clipPath^@svg:graphics|',
139+
'@svg:cursor^@svg:|',
140+
'@svg:defs^@svg:graphics|',
141+
'@svg:desc^@svg:|',
142+
'@svg:discard^@svg:|',
143+
'@svg:ellipse^@svg:geometry|',
144+
'@svg:feBlend^@svg:|',
145+
'@svg:feColorMatrix^@svg:|',
146+
'@svg:feComponentTransfer^@svg:|',
147+
'@svg:feComposite^@svg:|',
148+
'@svg:feConvolveMatrix^@svg:|',
149+
'@svg:feDiffuseLighting^@svg:|',
150+
'@svg:feDisplacementMap^@svg:|',
151+
'@svg:feDistantLight^@svg:|',
152+
'@svg:feDropShadow^@svg:|',
153+
'@svg:feFlood^@svg:|',
154+
'@svg:feFuncA^@svg:componentTransferFunction|',
155+
'@svg:feFuncB^@svg:componentTransferFunction|',
156+
'@svg:feFuncG^@svg:componentTransferFunction|',
157+
'@svg:feFuncR^@svg:componentTransferFunction|',
158+
'@svg:feGaussianBlur^@svg:|',
159+
'@svg:feImage^@svg:|',
160+
'@svg:feMerge^@svg:|',
161+
'@svg:feMergeNode^@svg:|',
162+
'@svg:feMorphology^@svg:|',
163+
'@svg:feOffset^@svg:|',
164+
'@svg:fePointLight^@svg:|',
165+
'@svg:feSpecularLighting^@svg:|',
166+
'@svg:feSpotLight^@svg:|',
167+
'@svg:feTile^@svg:|',
168+
'@svg:feTurbulence^@svg:|',
169+
'@svg:filter^@svg:|',
170+
'@svg:foreignObject^@svg:graphics|',
171+
'@svg:g^@svg:graphics|',
172+
'@svg:image^@svg:graphics|',
173+
'@svg:line^@svg:geometry|',
174+
'@svg:linearGradient^@svg:gradient|',
175+
'@svg:mpath^@svg:|',
176+
'@svg:marker^@svg:|',
177+
'@svg:mask^@svg:|',
178+
'@svg:metadata^@svg:|',
179+
'@svg:path^@svg:geometry|',
180+
'@svg:pattern^@svg:|',
181+
'@svg:polygon^@svg:geometry|',
182+
'@svg:polyline^@svg:geometry|',
183+
'@svg:radialGradient^@svg:gradient|',
184+
'@svg:rect^@svg:geometry|',
185+
'@svg:svg^@svg:graphics|#currentScale,#zoomAndPan',
186+
'@svg:script^@svg:|type',
187+
'@svg:set^@svg:animation|',
188+
'@svg:stop^@svg:|',
189+
'@svg:style^@svg:|!disabled,media,title,type',
190+
'@svg:switch^@svg:graphics|',
191+
'@svg:symbol^@svg:|',
192+
'@svg:tspan^@svg:textPositioning|',
193+
'@svg:text^@svg:textPositioning|',
194+
'@svg:textPath^@svg:textContent|',
195+
'@svg:title^@svg:|',
196+
'@svg:use^@svg:graphics|',
197+
'@svg:view^@svg:|#zoomAndPan'
198+
]);
199+
200+
var attrToPropMap: {[name: string]: string} = <any>{
201+
'class': 'className',
202+
'innerHtml': 'innerHTML',
203+
'readonly': 'readOnly',
204+
'tabindex': 'tabIndex'
205+
};
206+
5207

6208
@Injectable()
7-
export class DomElementSchemaRegistry extends ElementSchemaRegistry {
209+
export class DomElementSchemaRegistry implements ElementSchemaRegistry {
210+
schema = <{[element: string]: {[property: string]: string}}>{};
8211

212+
constructor() {
213+
SCHEMA.forEach(encodedType => {
214+
var parts = encodedType.split('|');
215+
var properties = parts[1].split(',');
216+
var typeParts = (parts[0] + '^').split('^');
217+
var typeName = typeParts[0];
218+
var type = <{[property: string]: string}>{};
219+
typeName.split(',').forEach(tag => this.schema[tag] = type);
220+
var superType = this.schema[typeParts[1]];
221+
if (isPresent(superType)) {
222+
StringMapWrapper.forEach(superType, (v, k) => type[k] = v);
223+
}
224+
properties.forEach((property: string) => {
225+
if (property == '') {
226+
} else if (property.startsWith('*')) {
227+
// We don't yet support events.
228+
// type[property.substring(1)] = EVENT;
229+
} else if (property.startsWith('!')) {
230+
type[property.substring(1)] = BOOLEAN;
231+
} else if (property.startsWith('#')) {
232+
type[property.substring(1)] = NUMBER;
233+
} else if (property.startsWith('%')) {
234+
type[property.substring(1)] = OBJECT;
235+
} else {
236+
type[property] = STRING;
237+
}
238+
});
239+
});
240+
}
9241

10242
hasProperty(tagName: string, propName: string): boolean {
11-
return true;
243+
if (tagName.indexOf('-') !== -1) {
244+
// can't tell now as we don't know which properties a custom element will get
245+
// once it is instantiated
246+
return true;
247+
} else {
248+
var elementProperties = this.schema[tagName.toLowerCase()];
249+
if (!isPresent(elementProperties)) {
250+
elementProperties = this.schema['unknown'];
251+
}
252+
return isPresent(elementProperties[propName]);
253+
}
12254
}
13255

14256
getMappedPropName(propName: string): string {
15-
return propName;
257+
var mappedPropName = StringMapWrapper.get(attrToPropMap, propName);
258+
return isPresent(mappedPropName) ? mappedPropName : propName;
16259
}
17260
}

‎modules/@angular/compiler/test/schema/dom_element_schema_registry_spec.ts‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,45 @@ import {
99
it,
1010
xit
1111
} from '@angular/testing/testing_internal';
12-
import {IS_DART} from '@angular/facade';
1312

1413
import {DomElementSchemaRegistry} from '@angular/compiler/src/schema/dom_element_schema_registry';
14+
import {extractSchema} from './schema_extractor';
1515

1616
export function main() {
17-
// DOMElementSchema can only be used on the JS side where we can safely
18-
// use reflection for DOM elements
19-
if (IS_DART) return;
20-
21-
var registry: DomElementSchemaRegistry;
22-
23-
beforeEach(() => { registry = new DomElementSchemaRegistry(); });
24-
2517
describe('DOMElementSchema', () => {
18+
var registry: DomElementSchemaRegistry;
19+
beforeEach(() => { registry = new DomElementSchemaRegistry(); });
2620

2721
it('should detect properties on regular elements', () => {
2822
expect(registry.hasProperty('div', 'id')).toBeTruthy();
2923
expect(registry.hasProperty('div', 'title')).toBeTruthy();
24+
expect(registry.hasProperty('h1', 'align')).toBeTruthy();
25+
expect(registry.hasProperty('h2', 'align')).toBeTruthy();
26+
expect(registry.hasProperty('h3', 'align')).toBeTruthy();
27+
expect(registry.hasProperty('h4', 'align')).toBeTruthy();
28+
expect(registry.hasProperty('h5', 'align')).toBeTruthy();
29+
expect(registry.hasProperty('h6', 'align')).toBeTruthy();
30+
expect(registry.hasProperty('h7', 'align')).toBeFalsy();
31+
expect(registry.hasProperty('textarea', 'disabled')).toBeTruthy();
32+
expect(registry.hasProperty('input', 'disabled')).toBeTruthy();
3033
expect(registry.hasProperty('div', 'unknown')).toBeFalsy();
3134
});
3235

33-
it('should return true for custom-like elements',
34-
() => { expect(registry.hasProperty('custom-like', 'unknown')).toBeTruthy(); });
36+
it('should detect different kinds of types',
37+
() => {
38+
// inheritance: video => media => *
39+
expect(registry.hasProperty('video', 'className')).toBeTruthy(); // from *
40+
expect(registry.hasProperty('video', 'id')).toBeTruthy(); // string
41+
expect(registry.hasProperty('video', 'scrollLeft')).toBeTruthy(); // number
42+
expect(registry.hasProperty('video', 'height')).toBeTruthy(); // number
43+
expect(registry.hasProperty('video', 'autoplay')).toBeTruthy(); // boolean
44+
expect(registry.hasProperty('video', 'classList')).toBeTruthy(); // object
45+
// from *; but events are not properties
46+
expect(registry.hasProperty('video', 'click')).toBeFalsy();
47+
})
48+
49+
it('should return true for custom-like elements',
50+
() => { expect(registry.hasProperty('custom-like', 'unknown')).toBeTruthy(); });
3551

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

4460
it('should detect properties on namespaced elements',
4561
() => { expect(registry.hasProperty('@svg:g', 'id')).toBeTruthy(); });
62+
63+
it('generate a new schema', () => {
64+
// console.log(JSON.stringify(registry.properties));
65+
extractSchema(
66+
(descriptors) => {
67+
// Uncomment this line to see:
68+
// the generated schema which can then be pasted to the DomElementSchemaRegistry
69+
// console.log(descriptors);
70+
});
71+
});
4672
});
4773
}

‎modules/@angular/compiler/test/schema/schema_extractor.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/**
2+
* We don't know how to extract schema in dart, so do nothing.
3+
*/
4+
extractSchema(fn(List<String> descriptors)) {
5+
}

0 commit comments

Comments
 (0)