refactor(DomSchema): improve readability by making the schema more explicit using interface names

Author: vicb

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

@@ -33,7 +33,7 @@ const OBJECT = 'object';
  * 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: The blank element inherits from root `[Element]` element, the super element of all elements.
  *
  * NOTE an element prefix such as `:svg:` has no special meaning to the schema.
  *
@@ -72,86 +72,86 @@ const OBJECT = 'object';
 // =================================================================================================
 
 const SCHEMA: string[] = ([
-  '*|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
-  'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^*|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*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^abbr|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume',
-  ':svg:^abbr|*abort,*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',
+  '[Element]|textContent,%classList,className,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*copy,*cut,*paste,*search,*selectstart,*webkitfullscreenchange,*webkitfullscreenerror,*wheel,outerHTML,#scrollLeft,#scrollTop',
+  '[HTMLElement]^[Element]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*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',
+  'abbr,address,article,aside,b,bdi,bdo,cite,code,dd,dfn,dt,em,figcaption,figure,footer,header,i,kbd,main,mark,nav,noscript,rb,rp,rt,rtc,ruby,s,samp,section,small,strong,sub,sup,u,var,wbr^[HTMLElement]|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*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^[HTMLElement]|!autoplay,!controls,%crossOrigin,#currentTime,!defaultMuted,#defaultPlaybackRate,!disableRemotePlayback,!loop,!muted,*encrypted,#playbackRate,preload,src,%srcObject,#volume',
+  ':svg:^[HTMLElement]|*abort,*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|',
-  'abbr^*|accessKey,contentEditable,dir,!draggable,!hidden,innerText,lang,*abort,*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',
-  'a^abbr|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
-  'area^abbr|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username',
+  'a^[HTMLElement]|charset,coords,download,hash,host,hostname,href,hreflang,name,password,pathname,ping,port,protocol,referrerPolicy,rel,rev,search,shape,target,text,type,username',
+  'area^[HTMLElement]|alt,coords,hash,host,hostname,href,!noHref,password,pathname,ping,port,protocol,referrerPolicy,search,shape,target,username',
   'audio^media|',
-  'br^abbr|clear',
-  'base^abbr|href,target',
-  'body^abbr|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^abbr|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
-  'canvas^abbr|#height,#width',
-  'content^abbr|select',
-  'dl^abbr|!compact',
-  'datalist^abbr|',
-  'details^abbr|!open',
-  'dialog^abbr|!open,returnValue',
-  'dir^abbr|!compact',
-  'div^abbr|align',
-  'embed^abbr|align,height,name,src,type,width',
-  'fieldset^abbr|!disabled,name',
-  'font^abbr|color,face,size',
-  'form^abbr|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
-  'frame^abbr|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
-  'frameset^abbr|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
-  'hr^abbr|align,color,!noShade,size,width',
-  'head^abbr|',
-  'h1,h2,h3,h4,h5,h6^abbr|align',
-  'html^abbr|version',
-  'iframe^abbr|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
-  'img^abbr|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
-  'input^abbr|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^abbr|!autofocus,challenge,!disabled,keytype,name',
-  'li^abbr|type,#value',
-  'label^abbr|htmlFor',
-  'legend^abbr|align',
-  'link^abbr|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
-  'map^abbr|name',
-  'marquee^abbr|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
-  'menu^abbr|!compact',
-  'meta^abbr|content,httpEquiv,name,scheme',
-  'meter^abbr|#high,#low,#max,#min,#optimum,#value',
-  'ins,del^abbr|cite,dateTime',
-  'ol^abbr|!compact,!reversed,#start,type',
-  'object^abbr|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
-  'optgroup^abbr|!disabled,label',
-  'option^abbr|!defaultSelected,!disabled,label,!selected,text,value',
-  'output^abbr|defaultValue,%htmlFor,name,value',
-  'p^abbr|align',
-  'param^abbr|name,type,value,valueType',
-  'picture^abbr|',
-  'pre^abbr|#width',
-  'progress^abbr|#max,#value',
-  'q,blockquote,cite^abbr|',
-  'script^abbr|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
-  'select^abbr|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
-  'shadow^abbr|',
-  'source^abbr|media,sizes,src,srcset,type',
-  'span^abbr|',
-  'style^abbr|!disabled,media,type',
-  'caption^abbr|align',
-  'th,td^abbr|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
-  'col,colgroup^abbr|align,ch,chOff,#span,vAlign,width',
-  'table^abbr|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
-  'tr^abbr|align,bgColor,ch,chOff,vAlign',
-  'tfoot,thead,tbody^abbr|align,ch,chOff,vAlign',
-  'template^abbr|',
-  'textarea^abbr|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
-  'title^abbr|text',
-  'track^abbr|!default,kind,label,src,srclang',
-  'ul^abbr|!compact,type',
-  'unknown^abbr|',
+  'br^[HTMLElement]|clear',
+  'base^[HTMLElement]|href,target',
+  'body^[HTMLElement]|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^[HTMLElement]|!autofocus,!disabled,formAction,formEnctype,formMethod,!formNoValidate,formTarget,name,type,value',
+  'canvas^[HTMLElement]|#height,#width',
+  'content^[HTMLElement]|select',
+  'dl^[HTMLElement]|!compact',
+  'datalist^[HTMLElement]|',
+  'details^[HTMLElement]|!open',
+  'dialog^[HTMLElement]|!open,returnValue',
+  'dir^[HTMLElement]|!compact',
+  'div^[HTMLElement]|align',
+  'embed^[HTMLElement]|align,height,name,src,type,width',
+  'fieldset^[HTMLElement]|!disabled,name',
+  'font^[HTMLElement]|color,face,size',
+  'form^[HTMLElement]|acceptCharset,action,autocomplete,encoding,enctype,method,name,!noValidate,target',
+  'frame^[HTMLElement]|frameBorder,longDesc,marginHeight,marginWidth,name,!noResize,scrolling,src',
+  'frameset^[HTMLElement]|cols,*beforeunload,*blur,*error,*focus,*hashchange,*languagechange,*load,*message,*offline,*online,*pagehide,*pageshow,*popstate,*rejectionhandled,*resize,*scroll,*storage,*unhandledrejection,*unload,rows',
+  'hr^[HTMLElement]|align,color,!noShade,size,width',
+  'head^[HTMLElement]|',
+  'h1,h2,h3,h4,h5,h6^[HTMLElement]|align',
+  'html^[HTMLElement]|version',
+  'iframe^[HTMLElement]|align,!allowFullscreen,frameBorder,height,longDesc,marginHeight,marginWidth,name,referrerPolicy,%sandbox,scrolling,src,srcdoc,width',
+  'img^[HTMLElement]|align,alt,border,%crossOrigin,#height,#hspace,!isMap,longDesc,lowsrc,name,referrerPolicy,sizes,src,srcset,useMap,#vspace,#width',
+  'input^[HTMLElement]|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^[HTMLElement]|!autofocus,challenge,!disabled,keytype,name',
+  'li^[HTMLElement]|type,#value',
+  'label^[HTMLElement]|htmlFor',
+  'legend^[HTMLElement]|align',
+  'link^[HTMLElement]|as,charset,%crossOrigin,!disabled,href,hreflang,integrity,media,rel,%relList,rev,%sizes,target,type',
+  'map^[HTMLElement]|name',
+  'marquee^[HTMLElement]|behavior,bgColor,direction,height,#hspace,#loop,#scrollAmount,#scrollDelay,!trueSpeed,#vspace,width',
+  'menu^[HTMLElement]|!compact',
+  'meta^[HTMLElement]|content,httpEquiv,name,scheme',
+  'meter^[HTMLElement]|#high,#low,#max,#min,#optimum,#value',
+  'ins,del^[HTMLElement]|cite,dateTime',
+  'ol^[HTMLElement]|!compact,!reversed,#start,type',
+  'object^[HTMLElement]|align,archive,border,code,codeBase,codeType,data,!declare,height,#hspace,name,standby,type,useMap,#vspace,width',
+  'optgroup^[HTMLElement]|!disabled,label',
+  'option^[HTMLElement]|!defaultSelected,!disabled,label,!selected,text,value',
+  'output^[HTMLElement]|defaultValue,%htmlFor,name,value',
+  'p^[HTMLElement]|align',
+  'param^[HTMLElement]|name,type,value,valueType',
+  'picture^[HTMLElement]|',
+  'pre^[HTMLElement]|#width',
+  'progress^[HTMLElement]|#max,#value',
+  'q,blockquote,cite^[HTMLElement]|',
+  'script^[HTMLElement]|!async,charset,%crossOrigin,!defer,event,htmlFor,integrity,src,text,type',
+  'select^[HTMLElement]|!autofocus,!disabled,#length,!multiple,name,!required,#selectedIndex,#size,value',
+  'shadow^[HTMLElement]|',
+  'source^[HTMLElement]|media,sizes,src,srcset,type',
+  'span^[HTMLElement]|',
+  'style^[HTMLElement]|!disabled,media,type',
+  'caption^[HTMLElement]|align',
+  'th,td^[HTMLElement]|abbr,align,axis,bgColor,ch,chOff,#colSpan,headers,height,!noWrap,#rowSpan,scope,vAlign,width',
+  'col,colgroup^[HTMLElement]|align,ch,chOff,#span,vAlign,width',
+  'table^[HTMLElement]|align,bgColor,border,%caption,cellPadding,cellSpacing,frame,rules,summary,%tFoot,%tHead,width',
+  'tr^[HTMLElement]|align,bgColor,ch,chOff,vAlign',
+  'tfoot,thead,tbody^[HTMLElement]|align,ch,chOff,vAlign',
+  'template^[HTMLElement]|',
+  'textarea^[HTMLElement]|autocapitalize,!autofocus,#cols,defaultValue,dirName,!disabled,#maxLength,#minLength,name,placeholder,!readOnly,!required,#rows,selectionDirection,#selectionEnd,#selectionStart,value,wrap',
+  'title^[HTMLElement]|text',
+  'track^[HTMLElement]|!default,kind,label,src,srclang',
+  'ul^[HTMLElement]|!compact,type',
+  'unknown^[HTMLElement]|',
   'video^media|#height,poster,#width',
   ':svg:a^:svg:graphics|',
   ':svg:animate^:svg:animation|',
@@ -235,12 +235,12 @@ export class DomElementSchemaRegistry extends ElementSchemaRegistry {
   constructor() {
     super();
     SCHEMA.forEach(encodedType => {
+      let type: {[property: string]: string} = {};
       const [strType, strProperties] = encodedType.split('|');
       const properties = strProperties.split(',');
       const [typeNames, superName] = strType.split('^');
-      const type: {[property: string]: string} = {};
       typeNames.split(',').forEach(tag => this._schema[tag.toLowerCase()] = type);
-      const superType = this._schema[superName];
+      const superType = superName && this._schema[superName.toLowerCase()];
       if (superType) {
         Object.keys(superType).forEach((prop: string) => { type[prop] = superType[prop]; });
       }

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

@@ -47,8 +47,8 @@ export function main() {
     });
 
     it('should detect different kinds of types', () => {
-      // inheritance: video => media => HTMLElement
-      expect(registry.hasProperty('video', 'className', [])).toBeTruthy();   // from *
+      // inheritance: video => media => [HTMLElement] => [Element]
+      expect(registry.hasProperty('video', 'className', [])).toBeTruthy();   // from [Element]
       expect(registry.hasProperty('video', 'id', [])).toBeTruthy();          // string
       expect(registry.hasProperty('video', 'scrollLeft', [])).toBeTruthy();  // number
       expect(registry.hasProperty('video', 'height', [])).toBeTruthy();      // number