| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  | /** | 
					
						
							|  |  |  |  * @license | 
					
						
							|  |  |  |  * Copyright Google Inc. All Rights Reserved. | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * Use of this source code is governed by an MIT-style license that can be | 
					
						
							|  |  |  |  * found in the LICENSE file at https://angular.io/license
 | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-09-30 15:50:59 -07:00
										 |  |  | import * as html from '@angular/compiler/src/ml_parser/ast'; | 
					
						
							|  |  |  | import {HtmlParser} from '@angular/compiler/src/ml_parser/html_parser'; | 
					
						
							|  |  |  | import {getHtmlTagDefinition} from '@angular/compiler/src/ml_parser/html_tags'; | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  | export function main() { | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |   describe('Node serializer', () => { | 
					
						
							| 
									
										
										
										
											2016-11-12 14:08:58 +01:00
										 |  |  |     let parser: HtmlParser; | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | 
 | 
					
						
							|  |  |  |     beforeEach(() => { parser = new HtmlParser(); }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support element', () => { | 
					
						
							|  |  |  |       const html = '<p></p>'; | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url'); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support attributes', () => { | 
					
						
							|  |  |  |       const html = '<p k="value"></p>'; | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url'); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support text', () => { | 
					
						
							|  |  |  |       const html = 'some text'; | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url'); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support expansion', () => { | 
					
						
							|  |  |  |       const html = '{number, plural, =0 {none} =1 {one} other {many}}'; | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url', true); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support comment', () => { | 
					
						
							|  |  |  |       const html = '<!--comment-->'; | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url', true); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     it('should support nesting', () => { | 
					
						
							|  |  |  |       const html = `<div i18n="meaning|desc">
 | 
					
						
							|  |  |  |         <span>{{ interpolation }}</span> | 
					
						
							|  |  |  |         <!--comment--> | 
					
						
							|  |  |  |         <p expansion="true"> | 
					
						
							| 
									
										
										
										
											2016-11-04 15:10:19 -07:00
										 |  |  |           {number, plural, =0 {{sex, select, other {<b>?</b>}}}} | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |         </p>                             | 
					
						
							|  |  |  |       </div>`;
 | 
					
						
							|  |  |  |       const ast = parser.parse(html, 'url', true); | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  |       expect(serializeNodes(ast.rootNodes)).toEqual([html]); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |     }); | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  | class _SerializerVisitor implements html.Visitor { | 
					
						
							|  |  |  |   visitElement(element: html.Element, context: any): any { | 
					
						
							| 
									
										
										
										
											2016-09-30 15:50:59 -07:00
										 |  |  |     if (getHtmlTagDefinition(element.name).isVoid) { | 
					
						
							|  |  |  |       return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |     return `<${element.name}${this._visitAll(element.attrs, ' ')}>${this._visitAll(element.children)}</${element.name}>`; | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   visitAttribute(attribute: html.Attribute, context: any): any { | 
					
						
							|  |  |  |     return `${attribute.name}="${attribute.value}"`; | 
					
						
							|  |  |  |   } | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   visitText(text: html.Text, context: any): any { return text.value; } | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   visitComment(comment: html.Comment, context: any): any { return `<!--${comment.value}-->`; } | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   visitExpansion(expansion: html.Expansion, context: any): any { | 
					
						
							|  |  |  |     return `{${expansion.switchValue}, ${expansion.type},${this._visitAll(expansion.cases)}}`; | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   visitExpansionCase(expansionCase: html.ExpansionCase, context: any): any { | 
					
						
							|  |  |  |     return ` ${expansionCase.value} {${this._visitAll(expansionCase.expression)}}`; | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   private _visitAll(nodes: html.Node[], join: string = ''): string { | 
					
						
							|  |  |  |     if (nodes.length == 0) { | 
					
						
							| 
									
										
										
										
											2016-07-01 17:29:54 -07:00
										 |  |  |       return ''; | 
					
						
							|  |  |  |     } | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |     return join + nodes.map(a => a.visit(this, null)).join(join); | 
					
						
							| 
									
										
										
										
											2016-07-01 17:29:54 -07:00
										 |  |  |   } | 
					
						
							| 
									
										
										
										
											2016-07-01 17:30:09 -07:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const serializerVisitor = new _SerializerVisitor(); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-08-01 14:43:20 -07:00
										 |  |  | export function serializeNodes(nodes: html.Node[]): string[] { | 
					
						
							| 
									
										
										
										
											2016-07-21 13:56:58 -07:00
										 |  |  |   return nodes.map(node => node.visit(serializerVisitor, null)); | 
					
						
							| 
									
										
										
										
											2017-07-28 15:58:28 +02:00
										 |  |  | } |